<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<title>模糊查询</title>
<style type="text/css">
* {
list-style: none;
margin: 0;
padding: 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" name="" id="txt" value="" />
<button type="button" id="btn">search</button>
<ul id="list">
</ul>
</div>
<script type="text/javascript">
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);
renderFruits(fruitList);
},false)
//回车查询
oTxt.addEventListener('keydown',function(e){
var e = event || window.event;
if(e.keyCode == 13){
var keyWord = oTxt.value;
var fruitList = searchByIndexOf(keyWord,fruits);
renderFruits(fruitList);
}
},false);
var key = false;
$('#txt').on('compositionstart',function(){
key = true;
console.log('不搜索')
});
$('#txt').on('compositionend',function(){
key = false;
console.log('汉字搜索');
var keyWord = oTxt.value;
var fruitList = searchByIndexOf(keyWord,fruits);
renderFruits(fruitList);
});
$('#txt').on('input',function(){
if(!key){
console.log('字母搜索');
var keyWord = oTxt.value;
var fruitList = searchByIndexOf(keyWord,fruits);
renderFruits(fruitList);
}
});
//模糊查询1:利用字符串的indexOf方法
function searchByIndexOf(keyWord,list){
if(!(list instanceof Array)) return;
var len = list.length;
var arr = [];
for(var i = 0; i < len; i++){
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++){
if(list[i].match(reg)){
arr.push(list[i]);
}
}
return arr;
}
//html渲染
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);
}
}
renderFruits(fruits);
</script>
</body>
</html>
