Tuesday, March 29, 2016

Home / Jquery / Textbox autocomplete using jquery - html5 datalist alternate method w3schools100

Textbox autocomplete using jquery - html5 datalist alternate method w3schools100

Autocomplete textbox values by using HTML5 datalist method is an easy way to implement autocomplete function in textboxes. But the problem is, it wont work in safari browser and inner word search feature is not working in google chrome web browser.

So, we must need an alternative method to implement autocomplete textbox values. Here we are going to see, how to implement autocomplete in jquery. If you have basic working knowledge in jquery, you can easily get perfect output by using our sample code.

External files we required are,

jquery.min.js (Jquery library)
jquery-ui.js (Jquery autocomplete)
jquery-ui.css (Jquery autocomplete CSS)

Complete code


<html>
<head>
<title>Jquery autocomplete textbox</title>

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$(function() {
 // SAMPLE ARRAY
 var arrLinks = [ 
   { id: 1, url: "http://w3schools100.blogspot.com", label: 'W3schools' },
   { id: 2, url: "http://studentsblog100.blogspot.com", label: 'StudentsBlog100' },
   { id: 3, url: "http://samplesite.com", label: 'Sample Site'} 
         ];
 //AUTOCOMPLETE FUNCTION    
 $("#text_box_id").autocomplete({
 source: arrLinks,
 messages: {
 noResults: '',
 results: function() {}
 }
 });
  
 /*AUTO COMPLETE - AFTER SELECT START*/
 $("#text_box_id").on("autocompleteselect", function (e, ui) {
 // e.preventDefault(); // prevent the "value" being written back in text box.
 
 var id = ui.item.id; //id,label,url etc..
 alert(id);

 });
 /*AUTO COMPLETE - AFTER SELECT END*/
});
</script>
</head>

<body>
Enter Keyword : <input id="text_box_id" type="text" />
</body>

</html>

Output