問題：實現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