前端模糊查询，可编辑，可选择的搜索框实现

为了减少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;
}

这样就可以实现如上图的效果了，本人前端小白，代码仅供参考学习，还请各位大神提出学习意见。