No więc tak:
w index.php:
<head>
<script src="jquery.min.js"></script>
<style type="text/css">
input#autocomplete{
width: 200px;
}
div#autocomplete_list{
display: none;
overflow: hidden;
background: grey;
border: 1px solid black;
border-radius: 5px;
padding: 3px;
width: 200px;
color: white;
}
div#autocomplete_list li:hover{
font-weight: bold;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(){
$("input#autocomplete").keyup(function(){
var div = $("div#autocomplete_list");
var value = $(this).val();
var text = "";
var pattern = new RegExp(value, "i");
$.ajax({
type: 'POST',
url: 'pobierz.php',
data: { 'word':value },
success: function(list){
var data = $.parseJSON(list);
$
.each(data
, function(i
, item
){ console.log(item);
text += "<li>"+item+"</li>";
});
if(text != ""){
div.html(text);
div.slideDown(1000);
}
}
});
});
function closeAutocompleteList(){
$("div#autocomplete_list").slideUp(500);
}
$("body").on('click', 'div#autocomplete_list li', function(){
$("input#autocomplete").val($(this).text());
closeAutocompleteList();
});
$("div#autocomplete_list").mouseleave(function(){
closeAutocompleteList();
});
});
</script>
</head>
.
.
.
echo '<input type="text" id="autocomplete"/>'; echo '<div id="autocomplete_list"></div>';
pobierz.php
<?php
if(!empty($_POST['word'])){ // połaczenie z bazą danych
$db = new PDO('mysql:host=localhost;dbname=przepisy_cba_pl', 'root', '')
array(PDO
::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'")) or
die('Nie można się połączyć z bazą danych.'); $stmt = $db->prepare('SELECT nazwa FROM przepisy WHERE nazwa LIKE :word');
$stmt->bindValue(':word', '%'.$_POST['word'].'%');
$stmt->execute();
$rows = $stmt->fetchAll();
foreach($rows as $row) {
$cars[] = $row['nazwa'];
}
}
?>