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.



 

About Author

Author Image
Aditi Jain

Aditi is a bright Groovy and Grails developer and have worked on development of various SaaS applications using Grails framework.

Request for Proposal

Name is required

Comment is required

Sending message..