前言:有时候在做移动端的时候需要用到搜索功能,老板目标很明确,一定要做成类似淘宝或者其他移动端搜索的功能一样,边输入字符边检索查找。但是这样对于一个小项目或者初学来说不是很简单,实现思路也比较复杂,这里不多说,我们用下面的简单的方法也能实现你想要的实现效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="input" type="text" value="" oninput="findEach()" />
<div id="text"></div>
</body>
<script type="text/javascript">
function findEach(){
var vData= ["name", "sex", "age", "job", "e-mail", "na"]; //查询字符集
var sFind = document.getElementById("input").value;
if(sFind==""){
alert("Can not be empty.");
}
if(sFind!=""){
var nPos;
var vResult = [];
//for(var i = 0; i <= vData.length; i++){
for(var i in vData){
var sTxt = vData[i]||'';
nPos = find(sFind, sTxt);
//nPos=sTxt.indexOf(sFind);
if(nPos >= 0){
vResult[vResult.length] = sTxt;
}
}
console.log(vResult);
document.getElementById('text').innerHTML = vResult
}
}
function find(sFind, sObj){
var nSize = sFind.length;
var nLen = sObj.length;
var sCompare;
if(nSize <= nLen ){
for(var i = 0; i <= nLen - nSize + 1; i++){
sCompare = sObj.substring(i, i + nSize);
if(sCompare == sFind){
return i;
}
}
}
return -1;
}
</script>
</html>
这样就可以在输入的时候就可以边检索后台的数据了。猛戳这里