Today I’m going to discuss about how to use jQuery AutoComplete in HTML Page.
To do this first we have to download the Theme from the jQuery Site. Please go to the below link to download the theme
URL: http://jqueryui.com/themeroller/
Once you go to the page, there you will find a ThemeRoller Tabbed Pane like in Fig.1. Click on Download theme.
Fig. 1
Once you click on the download you’ll be redirected to a page named Download Builder.Go to the bottom left corner of the page. You will find the option to download. Download the Theme to your local System.
To apply the jQuery Dialog we need three files and images folder.
1. jQuery Library: To use jQuery functionality we will use this and it will be available under a path like below. In my local system I have downloaded the them in this below path
e.g.: D:\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\js\jquery-1.10.2.js
2. jQuery UI Library: To use jQuery Dialog box functionality we need this library and it will be available under the below path.
e.g.: D:\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\js\jquery-ui-1.10.4.custom.js
3. jQuery CSS File: To Use the UI styles for jQuery Dialog box we need a CSS file and it will be available under the below path.
e.g.: D:\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\css\overcast\jquery-ui-1.10.4.custom.css.
Create an html file with the below code
<!doctypehtml>
<htmllang=”en”>
<head>
<metacharset=”utf-8″>
<title>jQuery UI Autocomplete </title>
<linkrel=”stylesheet”href=”jquery-ui-1.10.4.custom.css”>
<scriptsrc=”jquery-1.10.2.js”></script>
<scriptsrc=”jquery-ui-1.10.4.custom.js”></script>
<script>
$(function () {
var departments = [
"Information Technology",
"Human iResource",
"Finance"];
$(“#depts”).autocomplete({
source: departments
});
});
</script>
</head>
<body>
<labelfor=”Depts”>Departments: </label>
<inputid=”depts”><br/>
</body>
</html>
Under<head> tag we are referring to jquery-ui-1.10.4.custom.css and jquery-ui-1.10.4.custom.js files for jQuery Dialog box and jquery-1.10.2.js jQuery Library to run jQuery Code. If all the files exist in the same directory where html file resides then no need to give the path, just the file name is enough.
In the above code I have created a label and input tags. Label is used to display static text and input tag is used to get suggestions related to your search term in an input text field. In jQuery Auto complete mechanism, data can be set to an array as static or you can fetch from a remote data source i.e. database.
In this blog we are using Static array for jQuery UI Auto complete source. See the below code.
e.g.:
var departments = [
"Information Technology",
"Human iResource",
"Finance"];
To get suggestions to text box with id departments we need to use the auto completefunction and attribute source like below code. Here source will be departments array.
e.g.: $(“#depts”).autocomplete({
source: departments
});
Open the html file and give the search term like information Technology. Based on this search term jQuery will filter the static array which contains list of departments. Filtered result set will be displayed as suggestions like below Fig.2. Once the user select the particular item from the suggestions like Information Technology, Human Resource and Finance the same will be displayed in the text box. This is about Simple jQuery Auto complete. To know more about this please go to the below URL.
URL: http://jqueryui.com/autocomplete/#default
Fig. 2
By: Jayasankar J.