• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JqueryUI Autocomplete Widget

August 4, 2014 //  by Krishna Srinivasan//  Leave a Comment

The Autocomplete is important part of the modern rich web interface. The jQueryUI Autocomplete widget is a functionality which enables users to find and select from a list of values as they type. It offers suggestions related to the search item in a text input field. For autocomplete mechanism, data can be static source and we need to just fetch data from the remote database. It makes it pretty easy to setup and provides a smooth experience to users. It works against pre populated list which can receive input can be associated with predefined entries.

The autocomplete widget acts like a dropdown, it starts to search predefined list of entries as user types a value in the text field for a match. As we enter more characters, list of the further entries will be displayed until the proper field is selected and we can easily filter down the list to better matches.

also read:

  • JQuery Keydown, Keypress and Keyup
  • JQUery Setting Drop Down Value
  • JQuery prepend() and prependTo()

The accordion method can be used in the following forms:

  • $(selector, context). button (options)
  • $(selector, context). button(“actions”, [params])

The following example demonstrates simple autocomplete widget functionality:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList
		});
	 });
</script>
</head>
<body>
<h2>Simple Autocomplete Example</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
</body>
</html>
  • The above script uses autocomplete mechanism to provide a list of suggestions for the beginning of the word as user types in the text box.
  • We have used variable called “myList” which contains set of words and display like a dropdown with set of words.
  • The “source: myList” line indicates the source name which tells the widget, where to get the suggestions for the autocomplete menu from.
  • When we run the script, the autocomplete event fires by using the ID selector “#myval” and refers the source location “myList” to display the list of suggestions for the beginning of the word as user types in the text box.

Run JQueryUI Simple Autocomplete Demo
JQueryUI Simple Autocomplete Example

Autocomplete Widget Options

The autocomplete widget contains following options:

Option Description Default Value
appendTo It determines which element should be appended to the menu. null
autoFocus It determines if it is set to true, first item in the list will be given focus when the list is displayed. false
delay It displays the time in milliseconds between keystroke and matching value. 300
disabled It disables the autocomplete when it is set to true i.e. it stops autocomplete operation. false
minLength It specifies the number of characters to be entered before search for suggestions is performed. 1
position It determines the position of suggestions menu, which will appear to the input element with which it is associated. { my: “left top”,”at:”left bottom”, collision: “none” }
source It tells the widget, where to get the suggestions for the autocomplete menu from. none; must be specified

The following example demonstrates usage of minLength, delay and source options:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList,
		   minLength: 2,
		   delay: 800
		});
	 });
</script>
</head>
<body>
<h2> Example Using Options</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
</body>
</html>
  • The script uses different types of autocomplete options such as minLength, delay and source.
  • The minLength option specifies the minimum number of characters need to be entered before a search for suggestions is performed. We have defined minimum length of 2 characters, which display the list of suggestions after entering two characters.
  • The delay determines the time between keystroke and start of a search. Here, we have specified 800 milliseconds of time to wait before trying to obtain the matching values.
  • The source option defines data to use, which tells the widget, where to get the suggestions for the autocomplete menu from. Here, source name is “myList”, which contains set of words, which should be display as list of suggestions when user types in the text box.
  • The autocomplete event fires by using the ID selector “#myval” and uses above mentioned options to perform specified task.

Run JQueryUI Autocomplete Options Demo

JQueryUI Autocomplete Options Example

The following example shows usage of autoFocus option:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList,
		   autoFocus: true
		});
	 });
</script>
</head>
<body>
<h2>Example Using Options</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
</body>
</html>
  • The program uses a autocomplete option, called as autofocus.
  • The autoFocus option determines whether or not the first item in the list will be given focus when the list is displayed.
  • When we run the script, user enters the text and first item is given focus in the suggestion list, because its value is set to true. If it is set to false, the first item will not be given the focus.

Run JQueryUI Autocomplete Options Demo1

JQueryUI Autocomplete Options Example1

Autocomplete Widget Methods

The following table shows some of the methods which are used with autocomplete widget:

Method Description
destroy() It removes the autocomplete functionality completely.
disable() This method disables the activity of the autocomplete mechanism.
enable() This method enables the activity of the autocomplete mechanism.
options() It returns the options property. It represents the autocomplete options values.
close It closes the autocomplete menu and hides list of suggestions from this menu.
search It fires a search event between the string value and data source .
widget() It defines the button widget element with jQuery object.

The following example explains usage of autocomplete search method:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	 $(function() {
		var myList = [
		   "java", "boostrap", "c", "c++","php", "html", "jQuery",
		];
		$( "#myval" ).autocomplete({
		   source: myList
		});
		$("#myButton").click(function(){
		   $("#myval").autocomplete("search","ja").focus();
	 });
	 });
</script>
</head>
<body>
<h2>Example Using Options</h2>
	 <label for="myval">Enter the search value: </label>
	 <input id="myval">
	 <input type="button" id="myButton" value="go">
</body>
</html>
  • The script makes use of autocomplete search method which fires a search event between the string value and data source .
  • The script searches for item which starts with “j” in the list of word set by using the ID selector “#myval” which selects the items from the source “myList”.

Run JQueryUI Autocomplete Methods Demo

JQueryUI Autocomplete Methods Example

Autocomplete Widget Events

The following table shows events which are used with autocomplete widget:

Event Description
change(event, ui) This event fires when the input element is changed.
create(event, ui) It fires when a autocomplete is created.
close(event, ui) It fires when the autocomplete widget closes the menu.
focus(event, ui) It fires when focus is moved on the item .
open(event, ui) It indicates that the autocomplete event is about to open the suggestion menu.
response(event, ui) It fires after a search completes, before the menu is shown.
search(event, ui) It fires after the minLength and delay are met.
select(event, ui) It fires when a value is selected from the menu.

The following example demonstrates usage of autocomplete select and focus events:

<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
	$(function() {
		var myList = [
		{
		   value: "c",
		   label: "C",
		   desc: "It is general-purpose programming language",
		},
		{
		   value: "html",
		   label: "HTML",
		   desc: "It is Hypertext Markup Language",
		},
		{
		   value: "php",
		   label: "PHP",
		   desc: "It is open source general-purpose scripting language",
		}
		 ];
		 $( "#myval" ).autocomplete({
			source: myList,
			focus: function( event, ui ) {
			   $( "#myval" ).val( ui.item.label );
				  return false;
			},
			select: function( event, ui ) {
			   $( "#myval" ).val( ui.item.label );
			   $( "#myval1" ).val( ui.item.value );
			   $( "#myval2" ).html( ui.item.desc );
			   return false;
			}
		 })
	.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
	return $( "<li>" )
	.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
	.appendTo( ul );
	 };
   });
</script>
</head>
<body>
	<label for="myval">Enter the search value: </label><br>
	<input id="myval">
	<input type="hidden" id="myval1">
	<p id="myval2"></p>
</body>
</html>
  • The script uses autocomplete events such as select and focus.
  • The select event triggers when a value is selected form the menu.
  • The focus event fires whenever menu options receives the focus.
  • We have used three types of options i.e. value, label and desc for storing the values.
  • When we run the script, we enter the word to select from the suggestion list.For instance, if we write as html in the text box, the description of the selected item will be displayed outside the text box.
  • The .data( “ui-autocomplete” )._renderItem = function( ul, item ) line uses _renderItem extension point of autocomplete which controls the creation of each option in the widget’s menu. It creates new element, appends it to the menu and return it.

Run JQueryUI Autocomplete Events Demo

JQueryUI Autocomplete Events Example

Category: jQueryTag: jQuery UI

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: «jquery JQuery getScript Example
Next Post: Java InvalidPropertiesFormatException Example »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

EJB 3.0 Timer Services

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact