Home Grown : 7. AJAX AutoSuggest
There are many JavaScript libraries out there that provide autosuggest/autocomplete functionality. I stumbled upon the prototype Library that provides autosuggest functionality in a quite easy way. We need following:
1. Prototype JavaScript Library:
http://prototype.conio.net/
2. A frontend page: Here you can find page phpAutoSuggest.php to be that frontend. We need the id of the field for which we want autoSuggest. Also we need to create a span and pass its Id to the Prototype Javascript. Also needed is a backend page that will give us the set of values that we want displayed as options. That is hintURL.php. Once again we are using help_topic table in mysql database on our local Mysql server. We search for the URL.
After creating all above we simple create a new autocompleter as new Ajax.autocompleter() to which we pass the id of field, id of span and the name of backend page.
When we type something in URL field we get a list of matching options. The trick here is in coding the backend page correctly i.e. we should generate appropriate entries in resultset which is not difficult. We are usually needed to use something like %word% in the query. Also we need to give unordered list formatted output to the autocompleter function. You can apply css to the result. You can fiddle with the appearance of the result so as to match your page. You'll find firebug very helpful while debugging this. Or on chrome similar functionality is provided via 'Inspect Element'. Next we move to editable fields, or how best to implement ASP.Net's datagridview like page in PHP.
Download the Project from HERE .
1. Prototype JavaScript Library:
http://prototype.conio.net/
2. A frontend page: Here you can find page phpAutoSuggest.php to be that frontend. We need the id of the field for which we want autoSuggest. Also we need to create a span and pass its Id to the Prototype Javascript. Also needed is a backend page that will give us the set of values that we want displayed as options. That is hintURL.php. Once again we are using help_topic table in mysql database on our local Mysql server. We search for the URL.
After creating all above we simple create a new autocompleter as new Ajax.autocompleter() to which we pass the id of field, id of span and the name of backend page.
When we type something in URL field we get a list of matching options. The trick here is in coding the backend page correctly i.e. we should generate appropriate entries in resultset which is not difficult. We are usually needed to use something like %word% in the query. Also we need to give unordered list formatted output to the autocompleter function. You can apply css to the result. You can fiddle with the appearance of the result so as to match your page. You'll find firebug very helpful while debugging this. Or on chrome similar functionality is provided via 'Inspect Element'. Next we move to editable fields, or how best to implement ASP.Net's datagridview like page in PHP.
Download the Project from HERE .
Comments
Post a Comment