PHP combined with Jquery.autocomplete plug-in to implement input auto-completion prompt function, jquery.autocomplete_php tutorial

PHP combined with the Jquery.autocomplete plug-in implementation of input auto-completion prompt function, Jquery.autocomplete

We use search features in many projects to help users find the information they want faster and more accurately. This article will introduce how to implement the user input automatic prompt function, just like Google Baidu search engine, when the user input keywords, the input box will be prompted, will be related to the keyword information displayed for the user to choose, enhance the user experience.

This article will use the AutoComplete plugin of the jquery UI, in conjunction with the backend PHP, which reads data from the MySQL data sheet via PHP.

Xhtml

First, you import the jquery library and related UI plug-ins, as well as CSS.

Copy the Code code as follows:

The JQuery UI plugin can be downloaded on the official website:
Then write an input box in the body:

Copy the Code code as follows:

Jquery

Copy the Code code as follows:
$ (function () {
$ ("#key"). AutoComplete ({
Source: "Search.php",
Minlength:2
});
});

As you can see, call the AutoComplete plugin, the data source is from search.php, and when the user enters 1 characters, the data source is called. The Autocomplte plugin provides several configurable parameters:
Disabled: is not available after page load, default is False, this does not need to be set to true, it does not make much sense.
AppendTo: Enter the Prompt box to append the element, the default is "body".
AutoFocus: The default is False, and when set to true, the first of the drop-down prompt box will be the selected state.
Delay: The latency time at which data is loaded, by default 300, in milliseconds.
MinLength: The drop-down prompt appears when you enter a number of characters, which defaults to 1.
Position: Defines the location of the drop-down cue box.
Source: Define the data source, the data source must be in JSON form, this example is the data source obtained by requesting search.php.
AutoComplete also offers a number of events and methods, please check the website for details:

Php

After calling the AutoComplete plug-in, there is no prompt for the effect, because the data source needs to be called.
First we need a table, and to add the right amount of data to the table, the structure of the table is as follows:

CREATE TABLE ' art ' (  ' id ' int (one) not null auto_increment,  ' title ' varchar (+) ' NOT NULL,  PRIMARY KEY (' id ')) Engine=myisam DEFAULT Charset=utf8;

Please build your own table and add data to table art.

Search.php implements the connection to the MySQL database and, based on the input from the front-end user, queries and obtains the matching content in the data table and outputs it in JSON form.

Include_once ("connect.php");  Connect database  $q = strtolower ($_get["term"]);//Get user Input content $query =mysql_query ("SELECT * from Art where title like ' $q% ' limit 0,10 "); Querying the database and composing the result set into an array while ($row =mysql_fetch_array ($query)) {   $result [] = Array (     ' id ' = = $row [' id '],     ' Label ' = ' $row [' title ']   

The final output of the JSON data format is:

Copy the Code code as follows:
[{"id": "3", "title": "\u4f7f\u7528css\u548cjquery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b
\u62c9\u9009\u9879\u83dc\u5355 "},
{"id": "4", "title": "\u4f7f\u7528jquery\u548ccss\u63a7\u5236\u9875\u9762\u6253\u5370
\U533A\U57DF "}]

At this point, and then test the input, do you see the effect you want?
Finally, it is worth mentioning that the AutoComplete plugin in Firefox has an input bug, input and can not prompt, need to forward space and then backspace to be prompted. There are many students on the net to give the solution, but the latest AutoComplete plug-in code appearance is reconstructed, my solution is to add the following code in 133 lines:

. Bind ("Input.autocomplete", function () {   //fix FF does not support Chinese bug   

The above mentioned is the whole content of this article, I hope you can like.

http://www.bkjia.com/PHPjc/990540.html www.bkjia.com true http://www.bkjia.com/PHPjc/990540.html techarticle PHP combined with jquery.autocomplete plug-in to implement the function of input auto-completion, Jquery.autocomplete we use the search function in many projects to help users to find more quickly and accurately ...

