JS search box js imitation Baidu search JS dropdown box jquery.autocomplete use

Make a Web site, you need to follow the text box input fuzzy Search database content to give the user a hint for choice, found the Jquery.autocomplete

Effects such as:

The plugin is hosted on GitHub, specifically address: Https://github.com/agarzola/jQueryAutocompletePlugin

Official English Document: http://api.jqueryui.com/autocomplete/

In the use of the process encountered a big hole to tell everyone.

The first one is the plugin's data source problem!

If you want to use the server's data source, you need to pass the URL parameter when calling AutoComplete!

You can take a look at the plugin's JS code, which will send the value of the search to the URL you specify

Example: ajaxsearchbyname.html?q=t&limit=10&timestamp=1439967678104

The second problem is the data format problem that the server provides!

The general use of this plug-in people need to get data from the server to show, and this plug-in need not pure JSON data, it is necessary for your server to follow his rules, the specific format is a newline character separated json, as shown in the following example:

Note: There is no limit to the fields here, you can easily define, wait until the plug-in to write their own processing functions to handle the different fields. This example provides three data, with a newline character between each piece of data! {"user_id":"3","user_name":"Test"}\n{"user_id":"8","user_name":"test1"}\n{"user_id":" One","user_name":"test4"}

To provide you with my specific code:

Html:

<Divclass= "Form-group">      <labelclass= "Col-sm-2 col-md-2 control-label" for= "user_name">Head:</label>      <Divclass= "Col-sm-10 col-md-5">         <inputtype= "text"class= "Form-control"ID= "user_name"value= "<?php echo isset ($tplData [' user_name '])? $tplData [' user_name ']: '?> '>         <inputtype= "hidden"name= "user_id"value= "<?php echo isset ($tplData [' user_id '])? $tplData [' user_id ']: '?> '>     </Div></Div>

Javascript:

<link href= ' __public__/common/jquery.autocomplate/jquery.autocomplete.css ' rel= ' stylesheet ' >

<script src= "__public__/common/jquery.autocomplate/jquery.autocomplete.js" ></script>

<script>    $(function () {        $("#user_name"). focus (). AutoComplete ("<?php Echo U (' Admin/user/ajaxsearchbyname ')?>", {formatitem:function(row, I, max) {console.log (row); varobj = eval ("(" + Row + ")");//Convert to JS object                returnObj.user_name; }, FormatResult:function(Row) {console.log (row); varobj = eval ("(" + Row + ")");//Convert to JS object                returnObj.user_name; }}). Result (function(event, item) {$ (' [name= ' user_id '] '). Val (Json.parse (item). user_id);        }); $(' #cancel '). Click (function(e) {e.preventdefault ();        Window.location.reload ();    }); });</script>

PHP code based on thinkphp:

/** * Return fuzzy search data*/     Public functionAjaxsearchbyname () {$name=$this->getget (' Q ', '); $page=$this->getget (' page ', 1); $condition=Array(); if(!Empty($name)) {            $condition[' nick_name '] =Array(' like ', '%$name%"); }        $userLogic=Newuserlogic (); $res=$userLogic->getpagelist ($condition,$page, 10); $RESULTSTRARR=Array(); foreach($res  as $item) {            Array_push($RESULTSTRARR, Json_encode (Array(' user_id ' =$item[' user_id '], ' user_name ' =$item[' User_name ']))); }        Exit(implode("\ n",$RESULTSTRARR)); }

JS search box js imitation Baidu search JS dropdown box jquery.autocomplete use