为了减少ajax请求,提高用户体验,对于一些信息量不大的模糊查询,可以前端实现,简单看下效果:
![](https://i-blog.csdnimg.cn/blog_migrate/b5d93cb11510e09ea24fb11ccbf4e4a2.png)
下面直接上代码:
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; }
这样就可以实现如上图的效果了,本人前端小白,代码仅供参考学习,还请各位大神提出学习意见。