web前端|js教程
js,搜索框,关键字,智能匹配
web前端-js教程
只要使用搜索引擎的朋友应该都有这样的体会，就是当在搜索框输入关键字的时候，会出现自能匹配现象，这绝对是非常好的用户体验，下面就是一段类似的代码，当然这里只是掩饰，所以只能匹配的数据都是本地固定好的，在实际应用中可以才能够数据库读取数据。
老虎机安卓源码,ubuntu显卡驱动型号,反跟踪爬虫技术,armbian php,余庆seo优化lzw
效果图：
vb 获取源码,ubuntu 完全卸载包,tomcat 支持用户数,python 爬虫教学,php首页广告弹窗代码,janguk seolzw
mfc程序源码,vscode怎么运行c的命令,ubuntu 分区详解,tomcat日志切割在哪,sqlite 排序 显示,速卖通网页设计过程,服务器怎么做空间,手机端抛物线加入购物车插件,前端组件和框架,文书网爬虫,互刷php,seo实战培训haiyaoseo,springboot修改记录,如何下载网站的源码,java网页客服,图片类网站模板,网站后台管理系统展望,网页注册页面方框的大小,软件项目管理系统 php,e语言程序图标lzw
代码实例如下:
关键词匹配搜索
function oSearchSuggest(searchFuc){ var input = $(#gover_search_key); var suggestWrap = $(#gov_search_suggest); var key = ""; var init = function(){ input.bind(keyup,sendKeyWord); input.bind(lur,function(){setTimeout(hideSuggest,100);}) } var hideSuggest = function(){ suggestWrap.hide(); } //发送请求，根据关键字到后台查询 var sendKeyWord = function(event){ //键盘选择下拉项 if(suggestWrap.css(display)==lock&&event.keyCode == 38||event.keyCode == 40) { var current = suggestWrap.find(li.hover); if(event.keyCode == 38) {if(current.length>0) {var prevLi = current.removeClass(hover).prev();if(prevLi.length>0){ prevLi.addClass(hover); input.val(prevLi.html());}} else {var last = suggestWrap.find(li:last);last.addClass(hover);input.val(last.html());} } else if(event.keyCode == 40) {if(current.length>0) {var nextLi = current.removeClass(hover).next();if(nextLi.length>0){ nextLi.addClass(hover); input.val(nextLi.html());}} else {var first = suggestWrap.find(li:first);first.addClass(hover);input.val(first.html());} } //输入字符 } else { var valText = $.trim(input.val()); if(valText ==\||valText==key) {return; } searchFuc(valText); key = valText; } } //请求返回后，执行数据展示 this.dataDisplay = function(data){ if(data.length<=0) { suggestWrap.hide(); return; } //往搜索框下拉建议显示栏中添加条目并显示 var li; var tmpFrag = document.createDocumentFragment(); suggestWrap.find(ul).html(\); for(var i=0; i<data.length; i++) { li = document.createElement(LI); li.innerHTML = data[i]; tmpFrag.appendChild(li); } suggestWrap.find(ul).append(tmpFrag); suggestWrap.show(); //为下拉选项绑定鼠标事件 suggestWrap.find(li).hover(function(){ suggestWrap.find(li).removeClass(hover); $(this).addClass(hover); },function(){ $(this).removeClass(hover); }).bind(click,function(){ $(this).find("span").remove(); input.val(this.innerHTML); suggestWrap.hide(); }); } init(); }; //实例化输入提示的JS,参数为进行查询操作时要调用的函数名 var searchSuggest = new oSearchSuggest(sendKeyWordToBack); //这是一个模似函数，实现向后台发送ajax查询请求，并返回一个查询结果数据，传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求 //参数为一个字符串，是搜索输入框中当前的内容 function sendKeyWordToBack(keyword){ var aData = []; aData.push(约100个+keyword+返回数据1); aData.push(约200个+keyword+返回数据2); aData.push(约100个+keyword+返回数据3); aData.push(约50000个+keyword+返回数据4); aData.push(约1044个+keyword+是真的); aData.push(约100个+keyword+是假的); aData.push(约100个+keyword+是真的); aData.push(约100个+keyword+是假的); //将返回的数据传递给实现搜索输入框的输入提示js类 searchSuggest.dataDisplay(aData); }
