前端js实现本地模糊搜索
2019-11-06 本文已影响0人
菜菜___
很多时候我们做模糊查询是传关键字给后台请求后台接口，但是有时候一些轻量级的列表前端来做可以减少ajax请求，在一定程度上提高用户体验。
例如搜索课程名称，首先我们将课程名称json数据存在本地，然后通过将关键字与目标检索数组进行匹配，将符合条件的对象返回并渲染显示在前端，这样就达到了我们本地模糊查询的目的。
模糊查询的规则：
本例是首字母相同，并且包含搜索的所有关键字，例如输入“计科”，返回计算机科学与技术。
/**检查一个字符串是否包含在另一个字符串里,并且首字符相同
* i:计算机科学与技术
* j:计科
* 返回true
* */
function checkStrContain(i, j) {
if(!i || !j){
return false;
}
if(i.charAt(0) != j.charAt(0)){
return false;
}
i = i.substr(1,i.length-1);
j = j.substr(1,j.length-1);
var a;
var b;
if (i.length > j.length) {
a = i;
b = j;
} else {
a = j;
b = i;
}
var count = 0;
for (var bi = 0; bi < b.length; bi++) {
var bArr = b.split("");
if (a.indexOf(bArr[bi]) != -1) {
count++;
} else {
break;
}
}
if (b.length == count) {
return true;
} else {
return false;
}
}
根据搜索关键字返回符合条件的数组：
/**
* 根据字符串模糊搜索返回符合条件的数据
* name 搜索字符串
* array 检索json数组
* length 匹配结果最大长度
*/
function getArrayByName(name,array,length){
if(array.length < 1){
return;
}
var result = [];
for (var key in array) {
if (checkStrContain(array[key].name,name) && result.length<length) {
result.push(array[key])
}
}
return result
}
按下键盘时进行检索，查找符合条件的数据，选择下拉选项后回填输入框：
$(function(){
/**按下键盘时搜索*/
$("body").undelegate("input", "keyup").delegate("input", "keyup", function() {
var name = $(this).val().replace(/\s+/g, "");
if(name.length>0){
var resultArray = getArrayByName(name,jsonArr,6);
if(resultArray.length<1){
$(this).next("ul").hide();
}else{
var html = "";
for(var i=0;i<resultArray.length;i++){
html += "<li>"+resultArray[i].name+"</li>";
}
$(this).next("ul").html(html).show();
}
}
})
/**下拉列表展开时点击li的事件,为输入框赋值*/
$(".input-search").on("click","ul li",function(){
$(this).parent("ul").siblings("input").val($(this).text());
$(this).parent("ul").hide();
});
})
完整代码(包含样式)：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.input-search{
position: relative;
margin: 100px auto;
width: 200px;
}
input{
width: 200px;
height: 30px;
padding-left: 10px;
padding-right: 10px;
background-color: #ffffff;
border: solid 1px #e5e5e5;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: none;
-webkit-appearance:none;
appearance: none;
}
ul{
display: none;
position: absolute;
top: 29px;
width: 100%;
border: solid 1px #62a6da;
max-height: 340px;
overflow-y: auto;
z-index: 1;
font-size: 0;
}
ul li{
position: relative;
padding-left: 10px;
width: 100%;
height: 34px;
line-height: 34px;
font-size: 14px;
color: #454545;
text-align: left;
background-color: #fff;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul li:hover{
color: #fff;
background-color: #1c9dff;
}
</style>
</head>
<body>
<div class="input-search">
<input type="text" placeholder="请输入课程名称">
<ul></ul>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script>
$(function(){
/**按下键盘时搜索*/
$("body").undelegate("input", "keyup").delegate("input", "keyup", function() {
var name = $(this).val().replace(/\s+/g, "");
if(name.length>0){
var resultArray = getArrayByName(name,jsonArr,6);
if(resultArray.length<1){
$(this).next("ul").hide();
}else{
var html = "";
for(var i=0;i<resultArray.length;i++){
html += "<li>"+resultArray[i].name+"</li>";
}
$(this).next("ul").html(html).show();
}
}
})
/**下拉列表展开时点击li的事件,为输入框赋值*/
$(".input-search").on("click","ul li",function(){
$(this).parent("ul").siblings("input").val($(this).text());
$(this).parent("ul").hide();
});
})
var jsonArr = [
{
"name":"计算机组成原理"
},
{
"name":"计算机网络"
},
{
"name":"数据结构"
},
{
"name":"网页程序设计"
},
{
"name":"嵌入式开发"
},
{
"name":"高等数学"
},
{
"name":"计算机应用技术"
},
{
"name":"计算机科学与技术"
}
]
/**
* 根据字符串模糊搜索返回符合条件的数据
* name 搜索字符串
* array 检索json数组
* length 匹配结果最大长度
*/
function getArrayByName(name,array,length){
if(array.length < 1){
return;
}
var result = [];
for (var key in array) {
if (checkStrContain(array[key].name,name) && result.length<length) {
result.push(array[key])
}
}
return result
}
/**检查一个字符串是否包含在另一个字符串里,并且首字符相同
* i:计算机科学与技术
* j:计科
* 返回true
* */
function checkStrContain(i, j) {
if(!i || !j){
return false;
}
if(i.charAt(0) != j.charAt(0)){
return false;
}
i = i.substr(1,i.length-1);
j = j.substr(1,j.length-1);
var a;
var b;
if (i.length > j.length) {
a = i;
b = j;
} else {
a = j;
b = i;
}
var count = 0;
for (var bi = 0; bi < b.length; bi++) {
var bArr = b.split("");
if (a.indexOf(bArr[bi]) != -1) {
count++;
} else {
break;
}
}
if (b.length == count) {
return true;
} else {
return false;
}
}
</script>
</body>
</html>
