Using autocomplete in a text box for search etc
Posted By : Aditi Jain | 19-Dec-2013
Autocomplete enables users to quickly find and select from a pre-populated list of values as they type , leveraging searching and filtering.
We can apply autocomplete on any field that can receive input. When we give autocomplete focus to a field by entering something into it , the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters , we can filter down the list to better matches.
How to perform:
* Firstly we have to install the jquery and jquery ui plugin.
* Add these js and css to your gsp.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
* Now add this javascript function to your gsp.
$(document).ready(function(){ var availableTags = []; availableTags = ['','',''] $( "#searchId" ).autocomplete({source:availableTags});
Available tags holds the list of elements from which the element is searched.
* Example:
<label> Search: <input type="text" id="user" name="username" autocomplete="on"></label> <g:hiddenField name="searchUser" value="search"/> <input type="submit" style="display:none" id="submitSearchButton">
$(document).ready(function(){ var availableTags = []; availableTags = ${userList} $( "#user" ).autocomplete({source:availableTags}); $("#user").keypress(function(e) { if(e.which == 13) { $("#submitSearchButton").trigger('click')
In this example there is a input field labeled as search field. We have given a hidden field to get the id of the search item. We get the userList from the controller and define them as availabletags to perform autocomplete on them for searching a user. When we enter any letter in a search field the autocomplete feature opens a list of users in a drop down by filtering from that match , then after pressing enter by selecting a particular user we can perform our search.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Aditi Jain
Aditi is a bright Groovy and Grails developer and have worked on development of various SaaS applications using Grails framework.