边搜索边显示

事件逻辑：

1.用户在输入框输入文字后

 

obj.onkeyup = function (e) {

}

 

 

 

2.将输入的文字与后台数据做查询

 

for (var i = 0; i < data.length; i++) {
            //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。检索val
            if (val.trim().length > 0 && data[i].indexOf(val) > -1) {//val.trim()两端去空格处理
                //如果要检索的字符串值没有出现，则该方法返回 -1。
                srdata.push(data[i]);
            }
}

 

.push()

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

 

3.查询到后返回给客户端

 

//获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表
        var ele_datalist = document.getElementById("datalist");
        ele_datalist.style.visibility = "visible";
        ele_datalist.innerHTML = "";
        //如果获取到的数据为空,则不显示
        if (srdata.length == 0) {
            ele_datalist.style.visibility = "hidden";
        }

 

 

 

4.然后将返回的数据显示在数据列表下

 

ele_li.appendChild(ele_a);
ele_datalist.appendChild(ele_li);

 

完整案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .search {
            display: inline-flex;
            height: 35px;
            margin: 50px auto;
            position: relative;
        }
        .search input {
            border: #eee 1px solid;
            background-color: #fff;
            outline: none;
            width: 200px;
            padding: 0 5px;
        }
        .search button {
            background-color: #ff3300;
            color: #fff;
            border: none;
            width: 80px;
        }
/*显示列表*/
        .search ul {
            position: absolute;
            left: 0;
            top: 35px;
            border: #eee 1px solid;
            min-width: calc(100% - 80px);
            text-align: left;
            visibility: hidden;
        }
        .search ul a {
            display: block;
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="search">
    <input type="text" value="" id="key">
    <button>搜索</button>
    <ul id="datalist">
        <!--<li><a href="#">武林外传</a> </li>-->
        <!--<li><a href="#">葵花宝典</a> </li>-->
        <!--<li><a href="#">如来佛掌</a> </li>-->
        <!--<li><a href="#">九阴白骨爪</a> </li>-->
    </ul>
</div>

</body>
</html>
<script type="text/javascript">
    //定义一些数据
    var data = ["15057187176", "15057187175", "15057187174", "15057187173", "武林江湖", "will"];
    var ele_key = document.getElementById("key");
    ele_key.onkeyup = function (e) {

        var val = this.value;
        console.log(val);
        //获取输入框里匹配的数据
        var srdata = [];
        for (var i = 0; i < data.length; i++) {
            console.log(data[i].indexOf(val))
            //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。检索val
            if (val.trim().length > 0 && data[i].indexOf(val) > -1) {//val.trim()两端去空格处理
                //如果要检索的字符串值没有出现，则该方法返回 -1。
                srdata.push(data[i]);
            }
        }
        //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表
        var ele_datalist = document.getElementById("datalist");
        ele_datalist.style.visibility = "visible";
        ele_datalist.innerHTML = "";
        //如果获取到的数据为空,则不显示
        if (srdata.length == 0) {
            ele_datalist.style.visibility = "hidden";
        }

        //1.将搜索到的数据追加到显示数据列表, , ,
        var self = this;
        for (var i = 0; i < srdata.length; i++) {
            var ele_li = document.createElement("li");
            var ele_a = document.createElement("a");
            ele_a.setAttribute("href", "javascript:;");
            ele_a.textContent = srdata[i];
            //2.然后每一行加入点击事件
            ele_a.onclick = function () {
                //3.点击后将数据放入搜索框内
                self.value = this.textContent;
                //4.数据列表隐藏
                ele_datalist.style.visibility = "hidden";
            }
            ele_li.appendChild(ele_a);
            ele_datalist.appendChild(ele_li);
        }

    }
</script>

 

posted @ 2016-11-29 15:15  最爱小虾  阅读(300)  评论(0)  编辑  收藏  举报