<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("#auto").autocomplete({
source: ['hi', 'bye', 'foo', 'bar'],
change: function (event, ui) {
if (ui.item) {
$("#message").text("user selected " + ui.item.value + " from list.");
} else {
$("#message").text("user entered " + this.value);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="auto" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<span id="message">user selected bye from list.</span>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 22px; left: 0px; display: none; width: 193px;"><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">bye</a></li><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">bar</a></li></ul></body></html>
I want to change source of jquery to abc.php . It has to take data from database . How to change autocomplte above code . How to take autocomple date from database. Please Help me to resolve this issue .
You need select event instead of change
$("#auto").autocomplete({
source: ['hi', 'bye', 'foo', 'bar'],
select: function (event, ui) {
if (ui.item) {
$("#message").text("user selected " + ui.item.value + " from list.");
} else {
$("#message").text("user entered " + this.value);
}
}
});
Try This to get data from your PHP datasource:
$( "#auto" ).autocomplete({
source: "abc.php",
select: function( event, ui ) {
console.log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
If you look at the example on the jquery ui page (https://jqueryui.com/autocomplete/#remote), you simply have to change the source to:
source: "abc.php"
Two things to keep in mind:
term to your url, which contains the input value of the automplete.label(used for display) and value(used to identify the displayed value). If label is not present, it will use value instead.