I want the autocomplete using AJAX. but it doesn't display anything when i type on the textbox. It would be great if you find the problem.
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
$('#item_1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
data: {
name_startsWith: request.term,
type: 'item_table',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
$('#code_1').val(names[1]);
$('#description_1').val(names[2]);
$('#quantity_1').val(names[3]);
}
});
</script>
</head>
<body>
<form action="" method="post" >
<input type="text" name="item[]" id="item_1" class="ui-autocomplete-input">
<input type="text" name="code[]" id="code_1" class="ui-autocomplete-input">
<input type="text" name="description[]" id="description_1" class="ui-autocomplete-input">
<input type="text" name="quantity[]" id="quantity_1" class="ui-autocomplete-input">
</form>
</body>
</html>
AJAX.PHP My query when will find the search keyword and will display automatically on multiple textboxes.
require_once 'dbconnection.php';
if($_POST['type'] == 'item_table'){
$row_num = $_POST['row_num'];
$result = mysqli_query($conn, "SELECT item, code, description, quantity FROM item_tb where item LIKE '".strtoupper($_POST['name_startsWith'])."%'");
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$name = $row['item'].'|'.$row['code'].'|'.$row['description'].'|'.$row['quantity'].'|'.$row_num;
array_push($data, $name);
}
echo json_encode($data);
}
?>
I done this before some time on a site, check its header's search bar: http://jhm.co.nz/
I customized it for you, my json looks like:
[
{"id":"1","type":"product","name":"Q10 Soy oner"},
{"id":"3","type":"product","name":"SoyLotion Toner"}
]
and my script is:
$(function() {
$( "#headerSearch" ).autocomplete({
minLength: 1,
source: 'https://www.jhm.co.nz/ajaxSearch.php',
focus: function( event, ui ) {
name = ui.item.name;
$( "#headerSearch" ).val( name );
return false;
},
select: function( event, ui ) {
$( "#headerSearch" ).val( ui.item.name );
$( "#headerSearchId" ).val( ui.item.id );
$( "#headerSearchType" ).val( ui.item.type );
return false;
}
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
document.getElementById('headerSearch').className='ui-autocomplete-input';
return $( "<li>" ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
};
})
#headerSearchId, #headerSearchType are ids of hidden fields, in my case, you just make 3 input text fields and give them ids like #headerSearch, #headerSearchId, #headerSearchType, autocomplete will apply on #headerSearch, also need to modify your json, like my above.