jQuery UI Autocomplete Widget Uses

Posted By : Rajan Rawat | 20-Nov-2017

jquery

In this post we will study about the jquery UI 1.8 components i.e the autocomplete widget. This auto completing text fields is very popular choice for the visitor of the webisites beacause this compoenent makes the job easier while entering information

This widget is used for searching fields for example, when a website visitor enter a country name or city name or anything else then choice must be from a common dataset. As well as this widget is also very popular in developers as well because it easy to use, powerful and flexible

Syntax

This Method autocomplete() it can be used in two forms

           $(selector, context).autocomplete (options) Method
           $(selector, context).autocomplete ("action", params) Method

$ (selector, context).autocomplete (options) Method

This widget declares an HTML <input> element which is managed as an input field and it will be displayed above suggestions list. The parameter options is like an object that specifies the behavior of suggestion list whenever the user is typing in the input field

Syntax

             $(selector, context).autocomplete (options);

If want to give more options at a time using javascript objects. If there are one or more options available to provide then you can seprate them using comma.

                $(selector, context).autocomplete({option1: value1, option2: value2..... });

Now lets see an example for autocomplete widget functionality

<!Doctype html>

<head>

<title>jQuery UI Autocomplete functionality</title>

rel = "stylesheet">

$(function() {

var availableTutorials = [

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Fortran",

"Groovy",

"Haskell",

"Java",

"JavaScript",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

];

$( "#automplete-1" ).autocomplete({

source: availableTutorials

});

</script>

</head>

<body>

</div>

</body>

</html>

Now save the above code for in a HTML file and then open in a brwoser which support the javascript, then you the output just below. Now enter any word to see result

OUTPUT

Tags: