PHP combines the jQuery.autocomplete plug-in to implement the function of input auto-complete prompts

PHP combines the jQuery.autocomplete plug-in to implement the function of input auto-complete prompts_PHP tutorial

WBOY

Release： 2016-07-13 09:56:00

Original

1060 people have browsed it

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

We use the search function in many projects to help users find the information they want faster and more accurately . 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.

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:

The code is as follows:

jQuery

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 ;

1 2 3 4 5

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数据

1 2

6

7

8

include_once("connect.php"); //Connect to the database

.bind("input.autocomplete",function(){

//修复FF不支持中文bug

self.search(self.item);

});

$q = strtolower($_GET["term"]); //Get the content entered by the user

$query=mysql_query("select * from art where title like '$q%' limit 0,10"); //Query the database and form the result set into an array

The final output JSON data format is: 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: ?

1 2 3 4

.bind("input.autocomplete",function(){ //Fix the bug that FF does not support Chinese language self.search(self.item); });

The above is the entire content of this article, I hope you all like it. http://www.bkjia.com/PHPjc/990985.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/990985.htmlTechArticlePHP combines with jQuery.autocomplete plug-in to realize the function of input automatic completion prompts. We use the search function in many projects to help Users can find the information they want faster and more accurately. This article...