pomoc w przerobieniu kawałka kodu

pytanie zadane 12 stycznia 2016 w JavaScript przez babiak Obywatel (1,810 p.)

Witam,

mam problem z przerobieniem następującego kawałka kodu:

link: http://www.bewebdeveloper.com/tutorial-about-autocomplete-using-php-mysql-and-jquery

            <div class="content">
                <form>
                    <div class="label_div">Type a keyword : </div>
                    <div class="input_container">
                        <input type="text" id="country_id" onkeyup="autocomplet('#country_id', '#country_list_id')">
                        <ul id="country_list_id"></ul>
                    </div>
                    <div class="input_container">
                        <input type="text" id="country_idd" onkeyup="autocomplet('#country_idd', '#country_list_idd')">
                        <ul id="country_list_idd"></ul>
                    </div>
                </form>
            </div><!-- content -->

Jak widać powyżej chciałbym przerobić ten kod bym mógł wywoływać funkcję autocomplete dla wielu pól. Więc funkcję autocomplete przerobiłem następująco:

function autocomplet(par1, par2) {
	var min_length = 0; // min caracters to display the autocomplete
	var skad = par1;	//skad pobieram znaki do wyszukania
	var gdzie = par2;	//gdzie wyswietlam wynik wyszukiwania
	var keyword = $(skad).val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$(gdzie).show();
				$(gdzie).html(data);
			}
		});
	} else {
		$(gdzie).hide();
	}
}

ale to nie wystarcza ponieważ jeszcze trzeba przerobić funkcję set_item, a na nią już nie mam pomysłu :/ Kombinowałem jakoś z this i nic mi nie wychodziło :/

1 odpowiedź

odpowiedź 12 stycznia 2016 przez Magicone Nałogowiec (45,100 p.)

Skoro już chcesz to robić w atrybutach HTML:

function autocomplet(input, output) {
  var MIN_LENGTH = 0
  	, outputElement = $(output)
  	, inputelement = $(input)
  	, value = input.val()
  ;

  if (value.length >= MIN_LENGTH) {
   	$.post('ajax_refresh.php', {
   		keyword: value
   	}).done(function(data) {
   		outputElement.show().html(data);
   	});
  }
  else {
  	outputElement.hide();
  }
}

komentarz 12 stycznia 2016 przez babiak Obywatel (1,810 p.)

Niestety nie działa ten kod. Myślałem, że to literówka ponieważ funkcję nazwałeś autocomplet, a w inpucie wywołujesz autocomplete. Jednak to nie to. Z pliku ajax_refresh.php wywaliłem również funkcję set_item. Jak byś mógł to zerknij:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete using PHP/MySQL and jQuery</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	function autocomplet(input, output) {
	  var MIN_LENGTH = 0
	    , outputElement = $(output)
	    , inputelement = $(input)
	    , value = input.val()
	  ;
	 
	  if (value.length >= MIN_LENGTH) {
	    $.post('ajax_refresh.php', {
	        keyword: value
	    }).done(function(data) {
	        outputElement.show().html(data);
	    });
	  }
	  else {
	    outputElement.hide();
	  }
	}
</script>
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="images/BeWebDeveloper.png" />
        </div><!-- header -->
        <h1 class="main_title">Autocomplete using PHP/MySQL and jQuery</h1>
        <div class="content">
            <form>
                <div class="label_div">Type a keyword : </div>
                <div class="input_container">
                    <input onkeyup="autocomplet(this, '#country_list_id');"/>
                    <ul id="country_list_id"></ul>
                </div>
            </form>
        </div><!-- content -->    
        <div class="footer">
            Powered by <a href="#">bewebdeveloper.com</a>
        </div><!-- footer -->
    </div><!-- container -->
</body>
</html>

ajax_refresh.php

<?php
// PDO connect *********
function connect() {
    return new PDO('mysql:host=localhost;dbname=baza_danych', 'root', '', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}

$pdo = connect();
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM stopki WHERE nazwa LIKE (:keyword) ORDER BY nazwa ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
	// put in bold the written text
	$country_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['nazwa']);
	// add new option
    echo '<li>'.$country_name.'</li>';
}
?>