input搜索mysql_实现input输入时智能搜索
//智能搜索
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输入时智能搜索相关推荐
- 微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题 微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
- JAVA ajax搜索框_JS+Ajax实现百度智能搜索框
首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp pageEncoding=& ...
- input框灰色提示字,输入时提示字消失
在input属性中加入下面这段代码 value="你的提示文字" onFocus="if(value==defaultValue){value='';this.style ...
- 解决phpcms v9搜索结果不全或搜索不到内容(不再使用分词进行搜索,而是直接使用输入的关键字搜索)
打开phpcms\modules\search\index.php 找到如下代码: if(!empty($segment_q)) {$sql = "`siteid`= '$siteid' A ...
- 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 ...
- 微信小程序搜索框以及简单的页面内容搜索的实现
1 效果 先来看一下效果 2 设计思路 2.1 显示效果的设计 本示例包含两种不同的搜索框,第一种搜索框是在最初状态下显示的搜索框,它由一个输入框input和一个表示"搜索"的图片 ...
- win7计算机搜索功能没有了,win7搜索功能不能用了怎么办|win7搜索功能不见了怎么解决? - 学无忧...
在Win7中搜索功能相对于WinXP来讲使用越来越方便,随便打开一个文件夹,点击右上角的"搜索"文本框,输入自己需要搜索的内容就可以进行文件搜索了,但最近有网友提到win7搜索功能 ...
- web和微信小程序input输入时禁止输入中文方法
前言:作为一个小白--,每天进步一点点,每天总结一点点,生活就会美好一点- -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式: 2. ...
- ios手机端数字显示黑色和input输入时禁止滑动的解决方案
一.ios手机端数字显示黑色 苹果手机会自动识别出电话号码,以提高用户的体验,但是看着就会和其他元素格格不入,如下图: 有两个解决方案: 1.在头部标签中加入 <meta name=" ...
最新文章
- 服务器发消息给所有人,我需要服务器向所有客户端(Python、sockets)发送消息...
- linux定时任务Crond生产规范案例精讲09
- SAP系统未清账和已清账的区分
- 玩转ECS第6讲 | 弹性计算Region化部署和跨可用区容灾介绍
- 辽宁活跃ip段_有泰国女排影子!激情辽宁女排,打出快乐排球,输了比赛赢了球迷...
- DotNET企业架构应用实践-系列目录
- Java自定义JSlider UI
- html中radio,checkbox值的获取、赋值、注册事件
- 注释驱动的 Spring cache 缓存介绍
- python selenium安装失败_python:学习selenium遇到的坑
- sa结构组网方式_5G建网:先NSA还是SA?
- 椭圆曲线形式下的Pedersen commitment——vector commitment和polynomial commitment
- 量子机器学习(QML)(一):量子计算基础
- 51job简历如何导出pdf格式
- 电商小程序实战教程-总体介绍
- jQuery EasyUI详解-EasyUI环境配置
- AutoJs实战教程---刷宝短视频
- 剪印去水印-剪印怎么去除水印?
- Flink反压如何排查
- 深圳二手房房价分析与建模预测(附数据集)