前言:有时候在做移动端的时候需要用到搜索功能,老板目标很明确,一定要做成类似淘宝或者其他移动端搜索的功能一样,边输入字符边检索查找。但是这样对于一个小项目或者初学来说不是很简单,实现思路也比较复杂,这里不多说,我们用下面的简单的方法也能实现你想要的实现效果。

<!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>

这样就可以在输入的时候就可以边检索后台的数据了。猛戳这里