Here is the example of auto complete functionality that is widely used in any web application. By using Jquery autocomple plugin you can easily implement this functionality.
First download this plugin ui.autocomplete.js from http://jquery.com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="ui.autocomplete.js " type="text/javascript"> | |
| </script> | |
| <script type="”text/javascript”"> | |
| <body> | |
| <form> | |
| <% String strResult = "Panchal Jatin,Pandey Rahul,Rajput Jitendra ,Lalit Sharma"%> | |
| <input type="hidden" name="result" id="result" value="<%=strResult%>"/> | |
| <input type="text" name="displayResult" id="displayResult"/> | |
| </form> | |
| </body> | |
| <script> | |
| jQuery(document).ready(function(){ | |
| var result= jQuery('#result').val(); | |
| var formattedResult = result.split(','); | |
| jQuery('#displayResult').autocomplete({ | |
| data: formattedResult, | |
| autoFill: true | |
| }); | |
| }); | |
| </script> |
There are different different function asociated with each and every event let say when you type any thing inside text field there is appropriate function for the same. Same as when any suggestion displayed for autocomplete there is a appropriate function for it..you can over ride that function as per your need.
Bewlow are the list of function associated with each and every event. You can over ride it
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| formatItem: function(item) { | |
| return item; | |
| }, | |
| formatMatch: function(item) { | |
| //It will display matched item as per your input. | |
| return item; | |
| }, | |
| formatResult: function(item) { | |
| //It will display final out put inside the text box | |
| return item; | |
| }, | |
| result : function(event,item){ | |
| } |
