前端模糊查詢，可編輯，可選擇的搜索框實現

為了減少ajax請求，提高用戶體驗，對於一些信息量不大的模糊查詢，可以前端實現，簡單看下效果：

下面直接上代碼：

html代碼，需要有如下的頁面結構和屬性

<div class="wyInput" id="myInput">
    <div class="wyinput-group">
        <input type="text" placeholder="請輸入關鍵字">
        <a href="#" class="wyinput-btn">搜 索</a>
    </div>
    <div class="wyinput-drop">

    </div>
</div>

js代碼，需要引入jquery，自己將功能封裝成一個js插件，直接按代碼案例調用

<script src="wy_select.js"></script>
<script>
$(function () {
    //許傳入類似案例的json對象
    $("#myInput").wy_inselect([{name:'紫色'},{name:'yellow'},{name:'pink'},{name:'whrite'}]); 
});
</script>

(function($){
    $.fn.extend({
        "wy_inselect":function(options){
            if(!isValid(options)) return this;
            var $Id = $(this);
            var last;
            $Id.find(".wyinput-drop").css("width",$(".wyinput-group input").outerWidth()+"px").hide();
            $Id.find(".wyinput-group input").keyup(function(event){
                last = event.timeStamp;
                setTimeout(function(){    //設時延遲0.5s執行
                    if(last-event.timeStamp==0)
                    //如果時間差為0（也就是你停止輸入0.5s之內都沒有其它的keyup事件發生）
                    {
                        var arr= searchIndex($Id,options);
                        loadDrop($Id,arr);
                    }
                },500);

            })
            $Id.find(".wyinput-drop").delegate(".drop-line a","click",function(){
                var html=$(this).html();
                console.log(html)
                $(this).parents(".wyinput-drop").siblings(".wyinput-group").find("input").val(html);
                $Id.find(".wyinput-drop").hide()
            })

        }
    })

    //監測參數是否合法
    function isValid(options){
        return !options || (options　&& typeof options === "object")?true:false;
    }

    //加載下拉框
    function loadDrop($Id,arr){
        var html = "";
        if(arr.length == 0){
            $Id.find(".wyinput-drop").hide().html("");
            return;
        }
        $.each(arr,function(idx,obj){
            html+='<p class="drop-line">' + '<a href="#">'+obj.name+'</a></p>';
        })
        $Id.find(".wyinput-drop").html(html).show();
    }

    //模糊查詢
    function searchIndex($Id,options){
        var $input = $Id.find(".wyinput-group input");
        var keywords = $input.val();
        var arr=[];
        if(keywords==""||keywords==" "){
            return arr;
        }
        $.each(options,function(idx,obj){
            if(obj.name.indexOf(keywords)>=0){
                arr.push({name:obj.name});
            }
        })
        console.log(arr);
        return arr;
    }

})(window.jQuery)

給頁面添加如圖示效果的css樣式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wyInput {
  width: 300px;
  margin: 20px auto;
  padding: 10px 10px;
  background: #EEE4D8;
  border-radius: 5px;
  border: 1px solid #B4B3AE;
  position: relative;
}
.wyInput .wyinput-group {
  width: 100%;
  height: 30px;
  overflow: hidden;
}
.wyInput .wyinput-group input {
  width: 80%;
  height: 30px;
  line-height: 30px;
  border: 1px solid #B4B3AE;
  float: left;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 0 5px;
}
.wyInput .wyinput-group a {
  float: left;
  width: 20%;
  background: #219FB6;
  color: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.wyInput .wyinput-group a:hover {
  background: #35ACC1;
}
.wyInput .wyinput-drop {
  position: absolute;
  top: 40px;
  z-index: 1000;
  background: #F2F2F2;
  border: 1px solid #EEE4D8;
  border-top-color: transparent;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 5px 5px;
}
.wyInput .wyinput-drop p a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  width: 100%;
  height: 24px;
  line-height: 24px;
  display: block;
}
.wyInput .wyinput-drop p a:hover {
  color: #fff;
  background: #35ACC1;
}

這樣就可以實現如上圖的效果了，本人前端小白，代碼僅供參考學習，還請各位大神提出學習意見。