//智能搜索

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;

}//往搜索框下拉建议显示栏中添加条目并显示

varli;var tmpFrag =document.createDocumentFragment();

suggestWrap.find('ul').html('');for(var i=0; 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 = newoSearchSuggest(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');//将返回的数据传递给实现搜索输入框的输入提示js类

searchSuggest.dataDisplay(aData);

}//步骤://1.读取搜索框中的内容$("#搜索框id").val() (这个是jquery方式读取,用js方式也一样)//2.用ajax异步请求(异步的话不会卡,数据量不大的话同步也行),这时候一般需要数据库返回所需的内容,接下来就在ajax的success中操作了。//3.success中:将读取到的返回值data解析,分别存储在相应的变量中。//4.你可以选择使用datatable插件将解析出来的数据显示出来,或者使用

mui.init({

keyEventBind: {

backbutton:true //打开back按键监听

}

});

input搜索mysql_实现input输入时智能搜索相关推荐

  1. 微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)

    微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题 微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...

  2. JAVA ajax搜索框_JS+Ajax实现百度智能搜索框

    首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp pageEncoding=& ...

  3. input框灰色提示字,输入时提示字消失

    在input属性中加入下面这段代码 value="你的提示文字" onFocus="if(value==defaultValue){value='';this.style ...

  4. 解决phpcms v9搜索结果不全或搜索不到内容(不再使用分词进行搜索,而是直接使用输入的关键字搜索)

    打开phpcms\modules\search\index.php 找到如下代码: if(!empty($segment_q)) {$sql = "`siteid`= '$siteid' A ...

  5. php 条件搜索mysql_具有多个条件的搜索功能 - PHP / MySQL (Search feature with multiple criteria - PHP/MySQL)...

    英文原文 You can check to see if the post for a particular field is empty, if it's not then append the c ...

  6. 微信小程序搜索框以及简单的页面内容搜索的实现

    1 效果 先来看一下效果 2 设计思路 2.1 显示效果的设计 本示例包含两种不同的搜索框,第一种搜索框是在最初状态下显示的搜索框,它由一个输入框input和一个表示"搜索"的图片 ...

  7. win7计算机搜索功能没有了,win7搜索功能不能用了怎么办|win7搜索功能不见了怎么解决? - 学无忧...

    在Win7中搜索功能相对于WinXP来讲使用越来越方便,随便打开一个文件夹,点击右上角的"搜索"文本框,输入自己需要搜索的内容就可以进行文件搜索了,但最近有网友提到win7搜索功能 ...

  8. web和微信小程序input输入时禁止输入中文方法

    前言:作为一个小白--,每天进步一点点,每天总结一点点,生活就会美好一点- -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式: 2. ...

  9. ios手机端数字显示黑色和input输入时禁止滑动的解决方案

    一.ios手机端数字显示黑色 苹果手机会自动识别出电话号码,以提高用户的体验,但是看着就会和其他元素格格不入,如下图: 有两个解决方案: 1.在头部标签中加入 <meta name=" ...

最新文章

  1. 服务器发消息给所有人,我需要服务器向所有客户端(Python、sockets)发送消息...
  2. linux定时任务Crond生产规范案例精讲09
  3. SAP系统未清账和已清账的区分
  4. 玩转ECS第6讲 | 弹性计算Region化部署和跨可用区容灾介绍
  5. 辽宁活跃ip段_有泰国女排影子!激情辽宁女排,打出快乐排球,输了比赛赢了球迷...
  6. DotNET企业架构应用实践-系列目录
  7. Java自定义JSlider UI
  8. html中radio,checkbox值的获取、赋值、注册事件
  9. 注释驱动的 Spring cache 缓存介绍
  10. python selenium安装失败_python:学习selenium遇到的坑
  11. sa结构组网方式_5G建网:先NSA还是SA?
  12. 椭圆曲线形式下的Pedersen commitment——vector commitment和polynomial commitment
  13. 量子机器学习(QML)(一):量子计算基础
  14. 51job简历如何导出pdf格式
  15. 电商小程序实战教程-总体介绍
  16. jQuery EasyUI详解-EasyUI环境配置
  17. AutoJs实战教程---刷宝短视频
  18. 剪印去水印-剪印怎么去除水印?
  19. Flink反压如何排查
  20. 深圳二手房房价分析与建模预测(附数据集)

热门文章

  1. pandas 0.22导入错误
  2. markdown使用积累1--$与$$
  3. vscode用作markdown入门2--代码上下标目录字体
  4. Hadoop 系列之 1.0 和2.0 架构
  5. Python线程安全问题及解决方法
  6. 一个很好用的DBHelper类(包括使用SQL语句 存储过程 事务 做相关操作) 入门级
  7. Ajax实现页面加载等待
  8. 《scikit-learn》数据预处理与特征工程(三)特征选择
  9. 深度学习《Life-Long Learning》
  10. ELMo代码详解(二)