I have implemented JQuery Ui autocomplete
function to display content from the database
using the below code
Script
<script>
$(function() {
$( "#query" ).autocomplete({
source: 'search.php'
});
});
</script>
HTML
<div class="col-md-9 col-sm-8 col-xs-8 " >
<input style="width:100%;"class="form-control" id="query" placeholder="Search" type="text">
</div>
When I run the above I get the following result within span notification
<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
<div style="display: none;">
3 results are available, use up and down arrow keys to navigate.</div>
<div style="display: none;">
4 results are available, use up and down arrow keys to navigate.</div>
<div>4 results are available, use up and down arrow keys to navigate.</div></span>
But the autocomplete UL>li
filed does not hold any value
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 902.452px; left: 72.7257px; width: 372px;">
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
</ul>
This is what I'm able to see
And here is the result that I'm getting in chrome ->Network
[{name: "asa"}, {name: "Abhijit Das"}, {name: "Abhijit Das"}, {name: "Abhijit Das"}]