Jquery+php+mysql the ability to implement input AutoComplete prompts

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.

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.

  
   <>< span=""> 
    rel=
    "stylesheet" 
    href=
    "jquery.ui.autocomplete.css"
    />  
      
      
      
      
      
   <>

JQuery UI plugin can be downloaded on official website: www.jqueryui.com

Then write an input box in the body:

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

Jquery

 $(function(){     $("#key").autocomplete({         "search.php",         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 see their official website: http://jqueryui.com/demos/autocomplete

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(11NULL auto_increment,   `title` varchar(100NULL,   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"//连接数据库   $q = strtolower($_GET["term"//获取用户输入的内容  $query=mysql_query("select * from art where title like '$q%' limit 0,10");  //查询数据库，并将结果集组成数组  while ($row=mysql_fetch_array($query)) {     $resultarray(         'id'$row['id'],         'label'$row['title']     ); }  echo json_encode($result);  //输出JSON数据  

The final output of the JSON data format is:

 [{"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(){     //修复FF不支持中文bug     self.search(self.item);  });  

The above describes the Jquery+php+mysql implementation of the input auto-completion of the function, including the content, I hope the PHP tutorial interested in a friend helpful.

