问题：实现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>