PHP combines the jQuery.autocomplete plug-in to implement the function of input automatic completion prompts, jquery.autocomplete_PHP tutorial

PHP combines with the jQuery.autocomplete plug-in to implement the function of inputting automatic completion prompts. jquery.autocomplete

We use the search function in many projects to help users find things faster and more accurately. wanted information. This article will introduce how to implement the function of automatic prompts for user input, just like the Google and Baidu search engines. When the user enters a keyword, there will be a prompt below the input box, displaying information related to the keyword for the user to choose, which improves the user experience. experience.

This article will use the autocomplete plug-in of jquery ui, combined with back-end PHP, and the data source reads the data of the mysql data table through PHP.

XHTML

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

Copy code The code is as follows:

The jQuery ui plug-in can be downloaded from the official website:
Then write an input box in the body:

Copy code The code is as follows:

jQuery

Copy code The code is as follows:
$(function(){
$("#key").autocomplete({
           source: "search.php",
        minLength: 2
});
});

You can understand at a glance that when the autocomplete plug-in is called, the data source comes from search.php. When the user enters 1 character, the data source is called. The autocomplte plugin provides several configurable parameters:
disabled: Whether it is unavailable after the page is loaded. The default is false. There is no need to set this to true. It does not make much sense.
appendTo: append elements to the drop-down prompt box during input, the default is "body".
autoFocus: The default is false. When set to true, the first drop-down prompt box will be selected.
delay: delay time when loading data, the default is 300, in milliseconds.
minLength: When you enter how many characters, a drop-down prompt will appear. The default is 1.
position: Define the position of the drop-down prompt box.
Source: Define the data source. The data source must be in json form. In this example, the data source is obtained by requesting search.php.
autocomplete also provides many events and methods. For details, please check its official website:

PHP

After calling the autocomplete plug-in, there is no prompt effect yet. Don't worry, because you need to call the data source.
First we need a table and add an appropriate amount of data to the table. The structure of the table 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 ;

Please create a table by yourself and add data to table art.

search.php implements the connection to the Mysql database, and based on the input of the front-end user, queries and obtains the matching content in the data table, and then outputs it in JSON form.

include_once("connect.php"); //连接数据库 
 
$q = strtolower($_GET["term"]); //获取用户输入的内容 
$query=mysql_query("select * from art where title like '$q%' limit 0,10"); 
//查询数据库，并将结果集组成数组 
while ($row=mysql_fetch_array($query)) { 
  $result[] = array( 
    'id' => $row['id'], 
    'label' => $row['title'] 
  ); 
} 
echo json_encode($result); //输出JSON数据 

The final output JSON data format is:

Copy code The code is as follows:
[{"id":"3","title":"u4f7fu7528CSSu548cjQueryu5236u4f5cu6f02u4eaeu7684u4e0b
u62c9u9009u9879u83dcu5355"},
{"id":"4","title":"u4f7fu7528jQueryu548cCSSu63a7u5236u9875u9762u6253u5370
u533au57df"}]

At this time, test the input again. Do you see the effect you want?
Finally, it is worth mentioning that the autocomplete plug-in has an input bug on Firefox. It does not prompt after typing. You need to space forward and then backspace to prompt. Many students on the Internet have given solutions, but the latest autocomplete plug-in code has been restructured. My solution is to add the following code to line 133:

.bind("input.autocomplete",function(){ 
  //修复FF不支持中文bug 
  self.search(self.item); 
}); 

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