JavaScript实现模糊推荐的input框(类似搜索框)

用户1225216

发布于 2018-03-05 14:12:26

4.4K0

发布于 2018-03-05 14:12:26

文章被收录于专栏：扎心了老铁扎心了老铁

如何用JS实现一个类似搜索框的输入框呢，再填充完失去焦点时，自动填充配置项，最终效果如下图：

实现很简单，但是易用性会上升一大截，需要用到的有jquery-ui的autocomplete，jquery的keyup事件，以及ajax与服务端的交互。

废话少说直接上代码：

引用，需要jquery-ui和jquery：

<link rel="stylesheet" href="/static/plugins/jqueryui1/jquery-ui-autocomplete.css">
<link rel="stylesheet" href="/static/plugins/jqueryui1/jquery-ui-1.7.1.css">
<script src="/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="/static/plugins/jQueryUI/jquery-ui.min.js"></script>

html输入框的设计，一个文本输入框和一个隐藏输入框：

<span class="bd_DW_checkbox_left_10">路径:</span>
<span>
    <input type="text" id="path" class="bd_DW_input_len_350">
    <input type="hidden" id="hidden_path" class="bd_DW_input_len_350"/>
</span>

js代码中实现：

1、autocomplete自动填充

2、keyup事件

3、ajax与后端交互

简单来说：

1、文本输入框的每次键入，触发一个keyup事件；

2、事件的处理方式是向后端请求模糊推荐的项items，这里的返回数据结果是：

{
  "errno": 0;
  "data": ["path1", "path2" ... "pathN"]      
}

3、autocomplete自动填充hidden输入框，其余的事情jquery-ui会为你处理好；

4、当你点选完成，或者是输入完成后，path框失去焦点(blur事件)的时候，会从后端请求数据，自动填充好各个输入框add_field。

具体代码如下：

function time_path_select() {
    //定义新数组
    var path_data = [];
    var _path_data = [];

    $("#time_path").autocomplete({
        source: _path_data
    });

    $("#time_path").keyup(
        function(event){
            var path=$("#time_path").val();
            if(path.length>0){
                var data_dict = send_get("/paths?path=" + path)
                var data = data_dict['data'];

                var len = data.length;
                for(var i=0;i<len-1;i++){
                    path_data[i]=data[i];
                };
                $("#hidden_path").val(path_data);
                var _data=$("#hidden_path").val().split(",");
                for(var j=0;j<_data.length;j++){
                    _path_data[j]=_data[j];
                }
            }
        }
    );
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-01-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery