博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现input输入时智能搜索
阅读量:4340 次
发布时间:2019-06-07

本文共 2834 字,大约阅读时间需要 9 分钟。

//      智能搜索function oSearchSuggest(searchFuc){  var input = $('#in');  var suggestWrap = $('#gov_search_suggest');  var key = "";  var init = function(){   input.bind('keyup',sendKeyWord);   input.bind('blur',function(){setTimeout(hideSuggest,100);})  }  var hideSuggest = function(){   suggestWrap.hide();  }  //发送请求,根据关键字到后台查询  var sendKeyWord = function(event){   //键盘选择下拉项   if(suggestWrap.css('display')=='block'&&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
约100个'+keyword+'返回数据1'); aData.push('
约200个'+keyword+'返回数据2'); aData.push('
约100个'+keyword+'返回数据3'); aData.push('
约50000个'+keyword+'返回数据4'); //将返回的数据传递给实现搜索输入框的输入提示js类 searchSuggest.dataDisplay(aData); } //步骤://1.读取搜索框中的内容$("#搜索框id").val() (这个是jquery方式读取,用js方式也一样)//2.用ajax异步请求(异步的话不会卡,数据量不大的话同步也行),这时候一般需要数据库返回所需的内容,接下来就在ajax的success中操作了。// 3.success中:将读取到的返回值data解析,分别存储在相应的变量中。// 4.你可以选择使用datatable插件将解析出来的数据显示出来,或者使用
标签,然后用// for(var i in datas){// var tr = "";// var tempData = [datas[i].logTime,datas[i].logType,datas[i].name];// for(var j in tempData){// tr += "
";// }// tr = "
" + tr + "
";// $('#log_table_tbody').append(tr);// }方式将数据加上去 mui.init({ keyEventBind: { backbutton: true //打开back按键监听 } });
" + tempData[j] + "

注释:

$('#in'); 为input
$('#gov_search_suggest');为智能搜索时出现的ul区域。
主要代码摘录一匿名大神

转载于:https://www.cnblogs.com/yongwang/p/6589653.html

你可能感兴趣的文章
axis服务器端和客户端开发
查看>>
第十四单元 Linux网络原理及基础设置
查看>>
蛋糕仙人的javascript笔记
查看>>
解决windows系统80端口被占用问题
查看>>
rails 项目部署中 nginx 报错及解决方法
查看>>
AIO(异步IO)
查看>>
数据挖掘概念与技术读书笔记(二)认识数据
查看>>
二叉平衡树
查看>>
Python day 6(4) Python 函数式编程2
查看>>
GIT 分支的理解
查看>>
C - Nuske vs Phantom Thnook
查看>>
转载:Android编译选项eng、user、userdebug的区别
查看>>
Thread.currentThread与this的区别
查看>>
陈睿豪第二次作业
查看>>
JSP的学习二(指令与标签)
查看>>
mysql的第一个程序
查看>>
001 springBoot的数据库操作
查看>>
006 numpy常用函数
查看>>
tensorflow学习笔记(二)
查看>>
HttpModule Url 重写
查看>>