模糊搜索效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模糊查询</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div align="center">
<input type="text" id="txt">
<button type="button" id="btn">search</button>
</div>
<ul id="list" align="center">
</ul>
</div>
<script src="./js/jquery-3.3.1.js"></script>
<script src="main.js"></script>
</body>
</html>
*{
list-style: none;
padding:0;
margin:0;
}
div{
text-align: center;
padding-top:20px;
}
ul{
padding-top:20px;
width:20%;
margin:0 50% 0 38%;
}
li{
padding:3px;
border:1px solid silver;
box-shadow: 1px 1px;
border-radius: 4px;
padding: 5px ;
}
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left:5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
button{
border: none;
color: white;
border-radius: 5px;
font-family:Arial;
padding: 8px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
background-color: #66afe9;
}
jQuery.fn.extend({
SearchContent:function(oBtn,oTxt,fruits,oList){
renderFruits(fruits,oList);
function renderFruits(list) {
if (!(list instanceof Array)) {
return;
}
oList[0].innerHTML = '';
var len = list.length;
var item = null;
for (var i = 0; i < len; i++) {
item = document.createElement('li');
item.innerHTML = list[i];
oList[0].appendChild(item);
}
}
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;
}
oBtn[0].addEventListener('click',function(){
var keyWord = oTxt[0].value;
var fruitList = this.searchByRegExp(keyWord, fruits);
this.renderFruits(fruitList);
}, true);
oTxt[0].addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
var keyWord = this.oTxt[0].value;
var fruitList = this.searchByRegExp(keyWord, fruits);
this.renderFruits(fruitList);
}
}, true);
var cpLock = false;
oTxt.on('compositionstart', function () {
cpLock = true;
console.log("不搜索")
});
oTxt.on('compositionend', function () {
cpLock = false;
console.log("汉字搜索");
var keyWord = oTxt[0].value;
var fruitList = searchByRegExp(keyWord, fruits);
renderFruits(fruitList);
});
oTxt.on('input', function () {
if (!cpLock) {
console.log("字母搜索")
var keyWord = oTxt[0].value;
var fruitList = searchByRegExp(keyWord, fruits);
renderFruits(fruitList);
}
});
}
})
var oTxt = $('#txt');
var oBtn = $('#btn');
var oList = $('#list');
var fruits = ["pick", "apple", "pair", "banana", "purple", "lemon", "orange", "strawberry", "s", "ssr"];
oTxt.SearchContent(oBtn,oTxt,fruits,oList)
在实现过程中,如果可以在jquery.fn.extend中直接实现函数的相互调用,而不是嵌套调用,可能会让代码更加简单易懂,但是我不太知道怎么实现这一步骤。
如果使用类方法,只能传递对象,不能传递节点,所以需要慎重