PHP uses the jQuery. autocomplete plug-in to implement the function of automatically completing input prompts. jquery. autocomplete

PHP uses the jQuery. autocomplete plug-in to implement the function of automatically completing input prompts. jquery. autocomplete

We use the search function in many projects to help users find the desired information faster and more accurately. This article describes how to enable the auto-Prompt function for users. Just like Google's Baidu search engine, when users enter keywords, a prompt is displayed at the bottom of the input box, the keyword-related information is displayed for the user to choose from, improving the user experience.

This article uses the autocomplete plug-in of jquery ui and the backend PHP to read data from the mysql DATA table through the data source in PHP.

XHTML

First, import the jquery library, related ui plug-ins, and css.

Copy codeThe Code is as follows:
<Link rel = "stylesheet" href = "jquery.ui.autocomplete.css"/>
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "ui/jquery. ui. core. js"> </script>
<Script type = "text/javascript" src = "ui/jquery. ui. widget. js"> </script>
<Script type = "text/javascript" src = "ui/jquery. ui. position. js"> </script>
<Script type = "text/javascript" src = "ui/jquery. ui. autocomplete. js"> </script>

You can download the jQuery ui plug-in from the official website:
Then, write an input box in the body:

Copy codeThe Code is as follows:
<Input type = "text" id = "key" name = "key"/>

JQuery

Copy codeThe Code is as follows:
$ (Function (){
$ ("# Key"). autocomplete ({
Source: "search. php ",
MinLength: 2
});
});

The autocomplete plug-in is called at a glance. The data source is from search. php. The data source is called when you enter 1 character. The autocomplte plug-in provides several configurable parameters:
Disabled: whether the page is unavailable after loading. The default value is false. It is meaningless to set this parameter to true.
AppendTo: append an element to the prompt box to be pulled. The default value is "body ".
AutoFocus: The default value is false. When it is set to true, the first one in the drop-down prompt box will be selected.
Delay: the delay time when loading data. The default value is 300, in milliseconds.
MinLength: the number of characters entered. The drop-down prompt is displayed. The default value is 1.
Position: defines the position of the drop-down prompt box.
Source: defines the data source. The data source must be in json format. In this example, the data source is obtained by requesting search. php.
Autocomplete also provides many events and methods. For details, refer to its official website:

PHP

After the autocomplete plug-in is called, no results are displayed. Don't worry, because you need to call the data source.
First, we need a table and add a proper amount of data to the table. The table structure is as follows:

CREATE TABLE `art` (  `id` int(11) NOT NULL auto_increment,  `title` varchar(100) NOT NULL,  PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;

 
Create a table and add data to the art table.

Search. php connects to the Mysql database, queries and obtains the matched content in the data table based on the input of the front-end user, and outputs the data in JSON format.

Include_once ("connect. php "); // connect to the database $ q = strtolower ($ _ GET [" term "]); // get user input content $ query = mysql_query ("select * from art where title like '$ q %' limit"); // query the database, and make the result set into an array while ($ row = mysql_fetch_array ($ query) {$ result [] = array ('id' => $ row ['id'], 'label' => $ row ['title']);} echo json_encode ($ result); // output JSON data

The output JSON data format is as follows:

Copy codeThe Code is as follows:
[{"Id": "3", "title": "\ u4f7f \ u7528CSS \ u548cjQuery \ u5236 \ u4f5c \ u6f02 \ u4logy \ u7684 \ u4e0b
\ U62c9 \ u9009 \ u9879 \ u83dc \ u5355 "},
{"Id": "4", "title": "\ u4f7f \ u7528jQuery \ u548cCSS \ u63a7 \ u5236 \ u9875 \ u9762 \ u6253 \ u5370
\ U533a \ u57df "}]

Then, test the input to see the effect you want?
Finally, it is worth mentioning that the autocomplete plug-in has an input BUG in firefox. After the input, no prompt is displayed. The prompt is displayed only when the leading space is removed. Many people have provided solutions on the Internet, but currently the latest autocomplete plug-in code is reconstructed. My solution is to add the following code in line 133:

. Bind ("input. autocomplete", function () {// fixed FF does not support Chinese bug self. search (self. item );});

The above is all the content of this article. I hope you will like it.