Automatic completion of Google search input box
Now, using the AutoComplete widget of the jquery UI, we can simply and easily implement the AutoComplete features of the Google search box in the above picture.
The current latest version of the JQuery UI is 1.10.3. Due to differences in usage between versions, the introduction of AutoComplete usage from other sites on previous versions does not fully apply to the latest version. Therefore, it is necessary to understand the latest usage of the jquery UI autocomplete.
Before using AutoComplete to implement AutoComplete, we'll do some preparation work. For example, first write an HTML file that contains the following code:
| code is as follows | copy code |
| <! DOCTYPE html> <label for= "language" > Please enter the specified language: </lable> </body> |
The corresponding operating effect is as follows:
General text input Box
After completing this preparation, we need to introduce the jquery UI JS files and CSS files into the HTML code, and since the jquery UI is dependent on jquery, we also need to introduce jquery before introducing the jquery UI.
| The code is as follows | Copy Code |
| <! DOCTYPE html> <label for= "Language" > Please enter the specified language:</lable> </body> |
|
Now, we will write the JS code to make the language input box to achieve the automatic completion function. To implement AutoComplete, we need the following AutoComplete () method that invokes the jquery UI extension:
| The code is as follows | Copy Code |
$ ("#language"). AutoComplete (Options_obj); |
|
The options_obj here is a JavaScript object for configuring AutoComplete related parameter options. We can set the object by reference to the relevant instructions in the AutoComplete official documentation.
AutoComplete has a very important property parameter source, which represents a collection of data for AutoComplete. The value of the Source property can be an array, or it can be a string that represents the URL address of a remote request, and the data returned by the URL is processed to obtain the AutoComplete needed; it can also be a callback function to facilitate the completion of some complex data processing.
Now, we'll use the simplest way to specify a static array of the source property to implement the AutoComplete function initially.
| The code is as follows | Copy Code |
| <! DOCTYPE html> <script type= "Text/javascript" > |
|
At this point, using the browser to access the HTML page will find that we have completed the most basic AutoComplete function.
Use AutoComplete to achieve basic AutoComplete features
However, in practical applications, the data we use for automatic completion is not immutable. In most cases, our data is stored in the database, at which point we need to use the AutoComplete remote connection to get the corresponding data.
| The code is as follows | Copy Code |
| <! DOCTYPE html> <script type= "Text/javascript" > |
|
The corresponding ajax-actions.php Server page code is as follows:
| The code is as follows | Copy Code |
<?php For the convenience of example, using arrays to simulate, you can also read data from a database in a practical application |
|
At this point, we visit the page again, and we can still see the AutoComplete input effect.
Automatic completion of data from a remote server
Note: Attentive readers may have noticed, whether it's getting data from a JS array, or from the backend server to get the data, our data has not changed; however, when we entered "C" on the page that fetched the data from the background, we showed all the data options, instead of just showing the filtered " Chinese "and" French ".
This is because, when we get the data from the background, if there is no additional filtering operation, AutoComplete will give the filtering operation to the server background to complete. When you send an AJAX request, AutoComplete appends the text in the current input box to the URL address we set with the default parameter name term. When we enter a C, the AutoComplete actually sends the request path to/ajax-actions.php?term=c. Therefore, autocomplete that the data returned by the server is the data that needs to be displayed after filtering.
In the above example, this result is caused by the fact that we are using a PHP array to simulate the data returned by the server. This problem does not exist if you are querying data using an SQL statement similar to the Select column from table where column like ' $term% ' in a practical application.
In the above tutorial, we introduce the key parameter option source for AutoComplete. In addition, there are a number of parameter options to provide us with more powerful other accessibility features. Due to more parameters, limited to space, we are no longer one by one examples of each parameter options. Below, we list some common parameter options for AutoComplete and explain that if you need to see the full API instructions, you can go to the official jquery UI website for more information.
Autofocus
The Boolean type. When set to True, the first option of the AutoComplete menu automatically gets the focus.
Appendto
String type. Sets a jquery selector string, and the associated HTML code generated by AutoComplete for display will be appended to the HTML element specified by the selector. If the property is Null,autocomplete, the first node with the Ui-front style will be found from the parent node of the current input box, and if no node is found, the relevant HTML code will be appended to the body tag.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
