做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete
效果如下图:
该插件托管在github上,具体地址:https://github.com/agarzola/jQueryAutocompletePlugin
官方的英文文档:http://api.jqueryui.com/autocomplete/
在使用过程中遇到大坑跟大家说一下。
第一个是插件的数据源问题!
如果要使用服务器的数据源需要在调用autocomplete的时候传入url的参数!
你可以看一下插件的js代码,它会把搜索的值以q发送到你指定的url
例如:ajaxSearchbyname.html?q=t&limit=10×tamp=1439967678104
第二个问题是服务器提供的数据格式问题!
一般的使用这个插件的人都是需要从服务器获取数据来展示,而这个插件需要的不是纯的json数据,是需要你服务器按照他的规则拼接一下,具体格式是用 换行符隔开的json,如下面示例所示:
注意:这里的字段是没有限制的,自己随便定义,等到调用插件的时候可以自己写一下处理函数来处理不同字段。 这个示例给提供了三条数据,每一条数据之间是有一个换行符的! {"user_id":"3","user_name":"test"} {"user_id":"8","user_name":"test1"} {"user_id":"11","user_name":"test4"}
给大家提供一下我的具体代码:
html:
<div class="form-group"> <label class="col-sm-2 col-md-2 control-label" for="user_name">负责人:</label> <div class="col-sm-10 col-md-5"> <input type="text" class="form-control" id="user_name" value="<?php echo isset($tplData['user_name']) ? $tplData['user_name'] : '' ?>"> <input type="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); var obj = eval("(" + row + ")"); //转换成js对象 return obj.user_name; }, formatResult: function (row) { console.log(row); var obj = eval("(" + row + ")"); //转换成js对象 return obj.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代码基于thinkphp:
/** * 返回模糊搜索数据 */ public function ajaxSearchbyname() { $name = $this->getGet('q', ''); $page = $this->getGet('page', 1); $condition = array(); if (!empty($name)) { $condition['nick_name'] = array('like', "%$name%"); } $userLogic = new userLogic(); $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(" ", $resultStrArr)); }