JavaScript實現模糊推薦的input框(類似百度搜索框)

如何用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];
                }
            }
        }
    );
}

function send_get(url) {
    var json_data = "";
    $.ajax({
        type:"get",
        url:url,
        datatype:"json",
        async: false,
        error: function() {
            pop_window("請求數據失敗");
        },
        success:function(data) {
            //json_data = $.parseJSON(data);
            json_data = data;
        },
    });
    return json_data;
}

function pop_window(message) {
    layer.alert(message, {
        skin: 'layui-layer-lan',
        closeBtn: 0
    });
}

function add_field() {
    $('#time_path').blur(function(){
        var path = $('#time_path').val();
        var json_data = send_get('/time_config_item?path=' + path);
        if (json_data != {}) {
            $("#time_buffer_time").val(json_data['buffer_time']);
            $("#time_task_name").val(json_data['item_name']);
            $("#time_email").val(json_data['owner_email']);
            $("#time_phone").val(json_data['owner_phone']);
            $("#time_owner").val(json_data['owner']);
            $("#bd_DW_monitor_status_select").val(json_data['status']);
            var cron_config = json_data['cron_config'];
            var list = cron_config.split(':');
            if (list[0] == '*') {
                $('#bd_DW_monitor_type_select').val('hour');
            }
            else {
                $('#bd_DW_monitor_type_select').val('day');
            }
            $("#time_hour").val(list[0]);
            $("#time_minute").val(list[1]);
        }
    });
}