jQuery+PHP+Mysql realizes the function of input automatic completion prompts

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

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 and related ui plug-ins, as well as css.

<code>  <span><link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"jquery.ui.autocomplete.css"</span><span>/></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"js/jquery.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.core.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.widget.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.position.js"</span><span>></span><span></script></span>  <span><script</span> <span>type</span>=<span>"text/javascript"</span> <span>src</span>=<span>"ui/jquery.ui.autocomplete.js"</span><span>></span><span></script></span>  </code>

The jQuery ui plug-in can be downloaded from the official website: www.jqueryui.com

Then write an input box in the body:

<code>  <span><input</span> <span>type</span>=<span>"text"</span> <span>id</span>=<span>"key"</span> <span>name</span>=<span>"key"</span> <span>/></span>  </code>

jQuery

<code> 
$(<span>function</span>()<span>{</span> 
    $(<span>"#key"</span>).autocomplete(<span>{</span> 
        source: <span>"search.php"</span>, 
        minLength: <span>2</span> 
    <span>}</span>);  <span>}</span>);  </code>

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 disabled 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: The 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: http://jqueryui.com/demos/autocomplete

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:

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

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.

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

The final output JSON data format is:

<code> 
[<span>{</span><span>"id"</span>:<span>"3"</span>,<span>"title"</span>:"\u4f7f\u7528CSS\u548cjQuery\u5236\u4f5c\u6f02\u4eae\u7684\u4e0b 
\u62c9\u9009\u9879\u83dc\u5355"<span>}</span>,  <span>{</span><span>"id"</span>:<span>"4"</span>,<span>"title"</span>:"\u4f7f\u7528jQuery\u548cCSS\u63a7\u5236\u9875\u9762\u6253\u5370 
\u533a\u57df"<span>}</span>]  </code>

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 get the 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:

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

The above introduces the function of jQuery+PHP+Mysql to realize the input automatic completion prompt, including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.