关于仿百度搜索框的简单思路【2017-12-25】

最近项目中要使用一个支持输入框搜索及查询，类似自动不全的功能
需求如下：
    1.当输入框为空的时后，获取焦点后，显示出当前输入框可以显示的所有信息
    2.当输入框输入信息后，支持模糊查询数据过滤。
    3.当输入框及下拉显示框失去焦点后（点击其以外的区域，则隐藏显示的下拉框部分）
设计思路如下：
    1.当点击输入框后，查询当前输入框可以查询的信息。显示在下拉显示列表中
    2.当点击下拉列表时，回填当先下拉列表的输入值，显示在输入框中
    3.当输入信息时，过滤当前下拉列表可以显示的信息，重新加载信息下拉列表
    4.当点击下拉列表及输入框以外的区域时，隐藏下拉列表部分。（难点）
    5，前台在输入框下面对接一个浮动的下拉列表（前端设计部分）

js部分:

$().ready(function() {
//处理流程：点击时1、清空下拉框，根据输入框的值，查询下拉信息
$("#sns").click(function(){
    var sns = $("#sns").val();
    conDataToLi(sns); 
});

$(document).click(function(e){
     var idValue = $(e.target).attr("id");  //获取当前点击区域对象的id值
     if(idValue != "sns" && idValue != "item" ){
         $('#item').hide();
     }
});

var lastTime; 
$("#sns").keyup(function(e){
    var sns = $("#sns").val();
    $("#item").empty();
    lastTime = e.timeStamp; 
    setTimeout(function () { 
        if (lastTime - e.timeStamp == 0) {
            conDataToLi(sns);
            } 
        }, 1000); 
    });
function conDataToLi(sns){
      var templateLi ='<li style="padding-left: 3px;border-bottom: 1px solid #e1e1e1;" val="$templateVal">templateText</li> ' ;
        $.ajax({
            url: "productSrch.htm",
            type: "POST",
            data: {sns:sns},
            dataType: "json",
            success: function(data) {
                // 回填数据
                if(data.length > 0){
                    $("#item").empty();
                    $("#item").show();
                    $.each(data, function(i, item) {
                        var templateLis = "" ;
                        templateLis=templateLi.replace("$templateVal",item.sn);
                        templateLis=templateLis.replace("templateText",item.sn+"--"+item.fullName);
                        $("#item").append(templateLis);
                    });
                    // 绑定回填数据事件
                    $('#divEara ul li').click(function(){
                        // 回填数据
                        var $this = $(this);
                        $("#sns").val($this.text());
                        // 隐藏弹出框
                        $("#item").empty();
                        $('#item').hide();             
                     });
                }else {
                    $("#item").append('<li>请选择</li>');
                    $('#item').hide();
                }
            }
        });    
}

});

html代码部分:

<div style="position: relative;width:186px" id="divEara" tabindex="1" >
<input type="text" name="sns" id="sns" class="text" value="${orderFilter.sns}"      autocomplete="off" />
<ul id="item" style="width:100%;z-index: 1;position: absolute;left: 0px;top: 25px; background:  #fff;border-top: 1px solid #e1e1e1;border-left: 1px solid #e1e1e1;border-right: 1px solid #e1e1e1;">
</ul>
</div>

【难点主要是前端CSS不熟悉，所以比较坑】