Getting started with jQueryUI Autocomplete plug-in

Last Update:2013-12-31 Source: Internet

Author: User

Tags jquery ui autocomplete

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The Autocomplete plug-in is a plug-in similar to the baidu search auto-Prompt function. Next I will share with you the steps for learning and using the Autocomplete plug-in, this article mainly introduces the basic usage of Autocomplete, but it has powerful functions. As long as we know the basics, we can almost implement the pull-down smart prompt function of Baidu.

Autocomplete is a powerful jQuery plugin that automatically completes input. It is also part of jQuery UI. I believe that readers who have used Baidu or Google search will not be unfamiliar. When we start to enter keywords in the search box, seo/seo.html "target =" _ blank "> the search engine intelligently associates with and matches the search keywords we need.
The auto-completion function of the Google search input box

The auto-completion function of the Google search input box

Now, we can use the Autocomplete component of jQuery UI to easily and conveniently implement the Automatic completion function provided by the Google search box in the above picture.

The latest version of jQuery UI is 1.10.3. Because there are also differences in usage between different versions, the usage of Autocomplete in previous versions on other websites cannot be fully applied to the latest version. Therefore, it is necessary to understand the latest usage of jQuery UI Autocomplete.

Before using Autocomplete to implement the Automatic completion function, we should first complete some preparation work. For example, compile an html file that contains the following code:

The Code is as follows:

Copy code

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery Autocomplete Entry Example </title>
</Head>
<Body>

<Label for = "language"> enter the specified language: </lable>

</Body>
</Html>

The running effect is as follows:
Regular text input box

After completing the above preparations, we need to introduce jQuery UI js files and css files in html code. Because jQuery UI depends on jQuery, therefore, we need to introduce jQuery before introducing jQuery UI.

The Code is as follows:

Copy code

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery Autocomplete Entry Example </title>
<! -- Introduce css files of jQuery UI. You can also introduce custom css files. -->
<Link href = "http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css"/>
<! -- Introduce jQuery's js file -->
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js"> </script>
<! -- Introduce the js file of jQuery UI -->
<Script type = "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</Head>
<Body>

<Label for = "language"> enter the specified language: </lable>

</Body>
</Html>

Now, let's write JavaScript code to enable the language input box to automatically complete the function. To implement automatic completion, we need to call the autocomplete () method of jQuery UI extension as follows:

The Code is as follows:	Copy code
$ ("# Language"). autocomplete (options_obj );

Here, options_obj is a JavaScript Object used to configure parameters related to autocomplete. We can refer to the instructions in the Autocomplete official documentation to set this object.

Autocomplete has a very important property parameter source, which indicates a set of data used for automatic function completion. The value of the source attribute can be an array or a string used to represent the URL address of a remote request. The data returned by the URL is processed to obtain the data required for autocomplete; it can also be a callback function to facilitate complex data processing.

Now, we can use the simplest method to specify a static array for The source attribute to implement automatic completion.

The Code is as follows:

Copy code

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery Autocomplete Entry Example </title>
<! -- Introduce css files of jQuery UI. You can also introduce custom css files. -->
<Link href = "http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css" type = "text/css" rel = "stylesheet"/>
<! -- Introduce jQuery's js file -->
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js"> </script>
<! -- Introduce the js file of jQuery UI -->
<Script type = "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</Head>
<Body>
<Label for = "language"> enter the specified language: </label>

<Script type = "text/javascript">
$ ("# Language"). autocomplete ({
Source: ["Chinese", "English", "Spanish", "Russian", "French", "Japanese", "Korean", "German"]
});
</Script>
</Body>
</Html>

In this case, you can access the html page through a browser and find that the most basic automatic function we have completed is complete.
Use autocomplete to implement basic Automatic completion Functions

However, in actual applications, the data we use for Automatic completion is not static. In most cases, our data is stored in the database. In this case, we need to use autocomplete to remotely connect to obtain the corresponding data.

The Code is as follows:

Copy code

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Title> jQuery Autocomplete Entry Example </title>
<! -- Introduce css files of jQuery UI. You can also introduce custom css files. -->
<Link href = "http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css" type = "text/css" rel = "stylesheet"/>
<! -- Introduce jQuery's js file -->
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js"> </script>
<! -- Introduce the js file of jQuery UI -->
<Script type = "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</Head>
<Body>
<Label for = "language"> enter the specified language: </label>

<Script type = "text/javascript">
$ ("# Language"). autocomplete ({
Source: "ajax-actions.php"
});
</Script>
</Body>
</Html>

The server page code for the corresponding ajax-actions.php is as follows:

The Code is as follows:

Copy code

<? Php
Header ('content-Type: text/html; charset = UTF-8 ');

// For the convenience of examples, here we use Arrays for simulation. You can also read data from the database in practical applications.
// The returned data is preferably an array or an object-type JSON string.
$ Languages ages = array ('Chinese ', 'English', 'Spanish ', 'Russian', 'French ', 'shanghaiese', 'kore', 'German ');
Echo json_encode ($ ages );
?>

At this point, we visit this page again, and we can still see the automatically completed input effect.
Automatic completion of data retrieval from remote servers

Note: careful readers may have noticed that our data has not changed, whether it is getting data from the js array or from the backend server; however, when we enter "c" on the page for retrieving data from the background, all data options are displayed, instead of displaying only the "Chinese" and "French" after filtering as before ".

This is because when we obtain data from the backend without any additional filtering operations, Autocomplete will hand over the filtering operation to the backend of the server. When sending an ajax request, Autocomplete will append the text in the current input box to the URL address we set in the form of the default parameter name term. When we enter a c, Autocomplete actually sends the Request Path to/ajax-actions.php? Term = c. Therefore, Autocomplete considers that the data returned by the server is the data to be displayed after filtering.

In the above example, the above results will be generated only when we use a php array to simulate the data returned by the server. This problem does not occur if you use an SQL statement similar to select column from table where column like '$ term %' in actual application.

In the above explanation, we introduced the key parameter source of autocomplete. In addition, there are many Parameter options that can provide us with more powerful auxiliary functions. Due to the large number of parameters, we will not give an example of each parameter option. Next, we will list some common Autocomplete Parameter options and describe them. If you need to view the complete API description, you can go to the official jQuery UI website for more information.

AutoFocus
Boolean type. If this parameter is set to true, the focus is automatically obtained for the first option of the auto-completion menu.
AppendTo
String type. Set a jQuery selector string. the html code generated by autocomplete for display is appended to the html element specified by the selector. If this attribute is null, autocomplete will find the first node with ui-front style from the parent node in the current input box. If no node is found, the relevant html code will be appended to the body tag.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More