js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

做了一个网站，需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择，就找到了jQuery.Autocomplete

效果如下图：

 

该插件托管在github上，具体地址：https://github.com/agarzola/jQueryAutocompletePlugin

官方的英文文档：http://api.jqueryui.com/autocomplete/

在使用过程中遇到大坑跟大家说一下。

第一个是插件的数据源问题！

如果要使用服务器的数据源需要在调用autocomplete的时候传入url的参数！

你可以看一下插件的js代码，它会把搜索的值以q发送到你指定的url

例如：ajaxSearchbyname.html?q=t&limit=10&timestamp=1439967678104

 

第二个问题是服务器提供的数据格式问题！

一般的使用这个插件的人都是需要从服务器获取数据来展示，而这个插件需要的不是纯的json数据，是需要你服务器按照他的规则拼接一下，具体格式是用\n换行符隔开的json，如下面示例所示：

注意：这里的字段是没有限制的，自己随便定义，等到调用插件的时候可以自己写一下处理函数来处理不同字段。

这个示例给提供了三条数据，每一条数据之间是有一个换行符的！

{"user_id":"3","user_name":"test"}\n
{"user_id":"8","user_name":"test1"}\n
{"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("\n", $resultStrArr));
    }