Jquery Ui Tutorial Web Technology

jQuery UI Autocomplete

by Online Tutorials Library July 14, 2022

jQuery UI Autocomplete

Autocomplete mechanism is frequently used in modern websites to provide the users a list of suggestion while typing the beginning word in the text box. It facilitates the user to select an item from the list, which will be displayed in the input field. This feature prevents the users from having to enter an entire word or a set of words.

jQueryUI provides an autocomplete widget to facilitates users by giving a list of suggestions to type in a text box. It is a control that acts a lot like a <select> dropdown, but filters the choices to present only those that match what the user is typing into a control.

Syntax:

You can use the autocomplete() method in two forms:

First Method

The autocomplete (options) method specifies that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. Here the options parameter is an object that specifies the behavior of the list of suggestions when the user is typing in the input field.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of more than one options, you will have to separate them using a comma as follows:

Following is a list of different options that can be used with this method:

Option	Description
appendTo	This option is used append an element to the menu. By default its value is null.
autoFocus	If you set this option as TRUE, the first item of the menu will automatically be focused when the menu is shown. By default its value is FALSE.
delay	This option specifies the time delay in milliseconds to wait before trying to obtain the matching values (as specified by the source option). By default its value is 300.
disabled	If you set this option as true, the autocomplete widget is initially disabled. By default its value is false.
minlength	It specifies the number of characters that must be entered before trying to obtain the matching values (as specified by the source option). By default its value is 1.
position	This option identifies the position of the suggestions menu iaccording to the input element. By default its value is { my: “left top”, at: “left bottom”, collision: “none” }.
source	This option specifies the manner in which the data that matches the input data is obtained. You must have to provide a value or the autocomplete widget won?t be created. By default its value is none; must be specified.

jQuery UI autocomplete() example 1

Let’s take a simple example to demonstrate the autocomplete widget functionality, passing no parameters to the autocomplete() method.

 <!doctype html> <html lang=”en”> <head>   <meta charset=”utf-8″>   <title>jQuery UI Autocomplete – Default functionality</title>   <link rel=”stylesheet” href=”..///code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>   <script src=”//code.jquery.com/jquery-1.10.2.js”></script>   <script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>   <link rel=”stylesheet” href=”..//resources/demos/style.css”>   <script>   $(function() {     var availableTags = [       “ActionScript”,       “AppleScript”,       “Asp”,       “BASIC”,       “C”,       “C++”,       “Clojure”,       “COBOL”,       “ColdFusion”,       “Erlang”,       “Fortran”,       “Groovy”,       “Haskell”,       “Java”,       “JavaScript”,       “Lisp”,       “Perl”,       “PHP”,       “Python”,       “Ruby”,       “Scala”,       “Scheme”     ];     $( “#tags” ).autocomplete({       source: availableTags     });   });   </script> </head> <body> <div class=”ui-widget”>  <p>Available Courses:</p>   <label for=”tags”>Tags: </label>   <input id=”tags”> </div> </body> </html>  

jQuery UI autocomplete() method example 2

Use autoFocus in jQueryUI autocomplete () method:

Let’s take an example to demonstarte the usage of option autoFocus in the autocomplete method.

 <!doctype html> <html lang=”en”> <head>   <meta charset=”utf-8″>   <title>jQuery UI Autocomplete – Default functionality</title>   <link rel=”stylesheet” href=”..///code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>   <script src=”//code.jquery.com/jquery-1.10.2.js”></script>   <script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>   <link rel=”stylesheet” href=”..//resources/demos/style.css”>   <script>   $(function() {     var availableTags = [       “ActionScript”,       “AppleScript”,       “Asp”,       “BASIC”,       “C”,       “C++”,       “Clojure”,       “COBOL”,       “ColdFusion”,       “Erlang”,       “Fortran”,       “Groovy”,       “Haskell”,       “Java”,       “JavaScript”,       “Lisp”,       “Perl”,       “PHP”,       “Python”,       “Ruby”,       “Scala”,       “Scheme”     ];     $( “#tags” ).autocomplete({       source: availableTags       autofocus:true    });   });   </script> </head> <body>  <div class=”ui-widget”>   <label for=”tags”>Tags: </label>   <input id=”tags”> </div>  </body> </html> 

jQuery UI autocomplete() method example 3

Use of minLength and delay in jQueryUI autocomplete () method:

Let’s take an example to demonstrate the usage of two options minLength and delay in jQueryUI autocomplete() method.

 <!doctype html> <html lang=”en”> <head>   <meta charset=”utf-8″>   <title>jQuery UI Autocomplete – Default functionality</title>   <link rel=”stylesheet” href=”..///code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>   <script src=”//code.jquery.com/jquery-1.10.2.js”></script>   <script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>   <link rel=”stylesheet” href=”..//resources/demos/style.css”>   <script>   $(function() {     var availableTags = [       “ActionScript”,       “AppleScript”,       “Asp”,       “BASIC”,       “C”,       “C++”,       “Clojure”,       “COBOL”,       “ColdFusion”,       “Erlang”,       “Fortran”,       “Groovy”,       “Haskell”,       “Java”,       “JavaScript”,       “Lisp”,       “Perl”,       “PHP”,       “Python”,       “Ruby”,       “Scala”,       “Scheme”     ];     $( “#tags” ).autocomplete({       source: availableTags       minLength:2,          delay:500,        });   });   </script> </head> <body> <div class=”ui-widget”>  <p>Type two letter for e.g:ja,sc etc</p>  <p>Available Courses:</p>   <label for=”tags”>Tags: </label>   <input id=”tags”> </div> </body> </html>  

jQuery UI autocomplete() method example 4

Use of lable in jQueryUI autocomplete () method:

Let’s take an example to demonstrate the usage of option label in the autocomplete widget of jQueryUI:

 <!doctype html> <html lang=”en”>    <head>       <meta charset=”utf-8″>       <title>jQuery UI Autocomplete functionality</title>       <link href=”https:://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>       <!– Javascript –>       <script>          $(function() {             $( “#autocomplete-4” ).autocomplete({                source: [                   { label: “India”, value: “IND” },                     { label: “America”, value: “USA” },                       { label: “Pakistan”, value: “PAK” },                         { label: “Iceland”, value: “ICE” },                   { label: “Australia”, value: “AUS” }                ]             });          });       </script>    </head>    <body>       <!– HTML –>        <div class=”ui-widget”>          <p>Type I OR A</p>          <input id=”autocomplete-4″>       </div>    </body> </html> 

Next TopicjQuery UI Button

autocomplete beginners effects example interactions introduction jquery professionals ui utilities widgets

previous post

Create and Manage Users in Jenkins

next post

Laravel Middleware