input搜索框实时检索功能实现（超简单，核心原理请看思路即可）
问题：实现input搜索框实时检索的功能，类似哔哩哔哩首页搜索功能（壮哉我大b站！）。公司要求，emmmm没办法，果然懒人是要被赶着走才会进步的说，诶嘿O(∩_∩)O。
解决方法：
1.参考资料：http://www.jb51.net/article/111408.htm 基础思路
http://blog.sina.com.cn/s/blog_69ec42d50102wqok.html 进阶思路
2.效果图：
3.思路：
一：目前监听input输入框有三种方法：
一种是onchange事件，触发条件：内容改变且失去焦点。
一种是onpropertychange事件，触发条件：元素内容改变即触发，另外js改变内容，该元素的属性改变也会触发。但只在IE11以下支持。
一种是html5的oninput事件，触发条件：value值的改变，但是js方式改变value不会触发，且在IE8以上及其他标准浏览器支持。
二：采用最简单的html5的oninput事件，onchange事件触发条件无法达到理想的输入即检索，onpropertychange对浏览器的支持力度太低。
三：由于oninput事件是输入即触发，这会导致出现输入汉字时出发次数过多，即使在拼写的时候也会触发，影响用户体验和后台交互，所以利用compositionstart和compositionend来处理。
原理：
当浏览器有非直接的文字输入时，compositionstart事件就会同步触发，记住，是同步
当浏览器是直接的文字输入时，compositionend事件就会触发
所以：
-
var cpLock = false;
-
$('input[search]').on('compositionstart', function () {
-
// 输入汉语拼音时锁住搜索框，不进行搜索，或者从汉语拼音转到字母时也可触发
-
cpLock = true;
-
console.log('不搜索')
-
});
-
$('input[search]').on('compositionend', function () {
-
// 结束汉语拼音输入并生成汉字时，解锁搜索框，进行搜索
-
cpLock = false;
-
console.log('汉字搜索');
-
// 接下去放ajax请求生成下拉框内容
-
});
-
$('input[search]').on('input', function () {
-
if (!cpLock) {
-
console.log('字母搜索')
-
// 接下去放ajax请求生成下拉框内容
-
}
-
});
4.代码:（我知道大家都和我一样懒的，嗯~ o(*￣▽￣*)o，不要脸地这么认为了，嘿嘿，下面代码是我稍微改了某大神的代码弄的demo，对不起大神，真的不是故意不加名字链接的，主要是开的页面太多关了不知道是哪个，加上自己懒）
demo:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>模糊查询</title>
-
<script src="../../../js/jquery-1.8.2.js"></script>
-
<style>
-
*{
-
list-style: none;
-
padding:0;
-
margin:0;
-
}
-
div{
-
text-align: center;
-
padding-top:20px;
-
}
-
ul{
-
padding-top:20px;
-
width:30%;
-
margin:0 50% 0 35%;
-
}
-
li{
-
padding:3px;
-
border:1px solid silver;
-
box-shadow: 1px 1px;
-
}
-
</style>
-
</head>
-
<body>
-
<div>
-
<input type="text" id="txt">
-
<button type="button" id="btn">search</button>
-
<ul id="list">
-
-
</ul>
-
</div>
-
<script>
-
/**
-
* Created by Steven on 2016-10-25.
-
*/
-
var oTxt = document.getElementById('txt');
-
var oBtn = document.getElementById('btn');
-
var oList = document.getElementById('list');
-
-
var fruits = ["桃子","苹果","梨子","香蕉","香瓜","葡萄","柠檬","橘子","草莓","草莓子","草拟吗","s","ssr"];
-
//点击事件
-
oBtn.addEventListener('click', function(){
-
var keyWord = oTxt.value;
-
// var fruitList = searchByIndexOf(keyWord,fruits);
-
console.log(fruitList);
-
var fruitList = searchByRegExp(keyWord, fruits);
-
renderFruits(fruitList);
-
}, false);
-
//回车查询
-
oTxt.addEventListener('keydown', function(e){
-
if(e.keyCode == 13){
-
var keyWord = oTxt.value;
-
// var fruitList = searchByIndexOf(keyWord,fruits);
-
var fruitList = searchByRegExp(keyWord, fruits);
-
renderFruits(fruitList);
-
}
-
}, false);
-
var cpLock = false;
-
$('#txt').on('compositionstart', function () {
-
cpLock = true;
-
console.log("不搜索")
-
});
-
$('#txt').on('compositionend', function () {
-
cpLock = false;
-
console.log("汉字搜索");
-
var keyWord = oTxt.value;
-
// var fruitList = searchByIndexOf(keyWord,fruits);
-
var fruitList = searchByRegExp(keyWord, fruits);
-
renderFruits(fruitList);
-
});
-
$('#txt').on('input', function () {
-
if (!cpLock) {
-
console.log("字母搜索")
-
var keyWord = oTxt.value;
-
// var fruitList = searchByIndexOf(keyWord,fruits);
-
var fruitList = searchByRegExp(keyWord, fruits);
-
renderFruits(fruitList);
-
}
-
});
-
function renderFruits(list){
-
if(!(list instanceof Array)){
-
return ;
-
}
-
oList.innerHTML = '';
-
var len = list.length;
-
var item = null;
-
for(var i=0;i<len;i++){
-
item = document.createElement('li');
-
item.innerHTML = list[i];
-
oList.appendChild(item);
-
}
-
}
-
//模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配。
-
-
//模糊查询1:利用字符串的indexOf方法
-
function searchByIndexOf(keyWord, list){
-
if(!(list instanceof Array)){
-
return ;
-
}
-
var len = list.length;
-
var arr = [];
-
for(var i=0;i<len;i++){
-
//如果字符串中不包含目标字符会返回-1
-
if(list[i].indexOf(keyWord)>=0){
-
arr.push(list[i]);
-
}
-
}
-
return arr;
-
}
-
//正则匹配
-
function searchByRegExp(keyWord, list){
-
if(!(list instanceof Array)){
-
return ;
-
}
-
var len = list.length;
-
var arr = [];
-
var reg = new RegExp(keyWord);
-
for(var i=0;i<len;i++){
-
//如果字符串中不包含目标字符会返回-1
-
if(list[i].match(reg)){
-
arr.push(list[i]);
-
}
-
}
-
return arr;
-
}
-
renderFruits(fruits);
-
</script>
-
</body>
-
</html>
原文地址：https://blog.csdn.net/qq_39974331/article/details/80410032
input搜索框实时检索功能实现（超简单，核心原理请看思路即可）的更多相关文章
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- 百度地图 Android SDK - 检索功能使用的简单演示样例
百度地图 SDK 不仅为广大开发人员提供了炫酷的地图展示效果.丰富的覆盖物图层,更为广大开发人员提供了多种 LBS 检索的能力. 通过这些接口,开发人员能够轻松的訪问百度的 LBS 数据,丰富自己的移 ...
- input搜索框的搜索功能
如图,想要实现输入关键词,点击搜索按钮或者回车键都能进行搜索并返回. html部分代码如下: js部分—— function entersearch(){ var event = window.eve ...
- 【组件】微信小程序input搜索框的实现
开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...
- input搜索框：根据历史记录自动填充后，去除默认黄色背景
如果是纯色背景,直接通过box-shadow覆盖即可: input:-webkit-autofill { color: #333!important; -webkit-text-fill-color: ...
- element input搜索框探索
转(https://blog.csdn.net/qq_37746973/article/details/78402812) 在script中添加下面两个函数 //queryString 为在框中输入的 ...
- 设计input搜索框提示文字点击消失的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序 —搜索框
wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // ...
- 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法
jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...
随机推荐
- Apicloud_(模板)登陆注册功能模板
项目已托管到Github上 传送门 不需要使用任何图片资源,需要用到SHA1.js库文件, Apicloud_(接口验证)用户注册头部信息X-APICloud-AppKey生成 传送门 项目全代码放到 ...
- [CSP-S模拟测试]:笨小猴（随机化）
题目传送门(内部题118) 输入格式 输入第一行是一个整数$n$,意义如以上所示. 接下来有$2n+1$行,每行为两个正整数,第$i$行的两个正整数分别代表$A_i$和$B_i$. 输出格式 如果无法 ...
- PyCharm将main.py解析成text文件的解决方法
问题:PyCharm将main.py解释成文本文件,没有代码提示,也无法执行 解决方法:File->Settings->Editor->File Types ->选则Text ...
- RabbitMq运行原理浅析
转载:https://blog.csdn.net/Evankaka/article/details/80977027 1.RabbitMq简介 AMQP,即Advanced Message Q ...
- mybatis 中的 update 返回值
摘自:https://www.jianshu.com/p/80270b93082a 如果定义一个如下的update函数,那么这个函数的返回值到底是啥意思呢?是受影响的行数吗? 验证之前我们先看看数据库 ...
- 利用 IntelliJ IDEA 进行代码对比的方法
Sometimes,我们会有这样的需求,即:想对比出两个不同版本代码的区别.如何实现? 第 1 种:如果我们是从 SVN 检出的项目,并且想比较本地代码与从 SVN 检出时的代码相比都有那些区别,可以 ...
- leetcode-easy-others-191. Number of 1 Bits-NO
mycode 不会... 输入是二进制....我还以为十进制.... 00000001011 = 11 题意: 编写一个将(无符号)整数作为输入的函数,并返回该数字二进制表示中等于1的位数.例如:输 ...
- jdbcTemplate的queryForList的使用方法
jdbcTemplate的queryForList的使用方法如下,它不一样的地方是,它获得的结果,会再放到一个map里去: List rows = jdbcTemplate.queryForList( ...
- OpenCV学习笔记(5)——颜色空间转换
学习如歌对图像进行颜色空间转换,从BGR到灰度图,或者从BGR到HSV等 创建一个程序用来从一幅图像中获取某个特定颜色的物体 1.转换颜色空间 OpenCV中有超过150种进行颜色空间转化的方法,但是 ...
- OpenStack 虚拟机冷/热迁移的实现原理与代码分析
目录 文章目录 目录 前文列表 冷迁移代码分析(基于 Newton) Nova 冷迁移实现原理 热迁移代码分析 Nova 热迁移实现原理 向 libvirtd 发出 Live Migration 指令 ...