Javascript实现搜索框的自动完成效果(二)

 var ele_key = document.getElementById("key", 0, 0);

 ele_key.onkeyup = function (e) {

     //处理事件

 }

var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];

//定义一些数据

var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];

var ele_key = document.getElementById("key", 0, 0);

ele_key.onkeyup = function (e) {

    var val = this.value;

    //获取输入框里匹配的数据

    var srdata = [];

    for (var i = 0; i < data.length; i++) {

        console.log(data[i].indexOf(val))

        if (val.trim().length > 0 && data[i].indexOf(val) > -1) {

              srdata.push(data[i], 0, 0);

        }

    }

 }

//定义一些数据

var data = ["编程的人", "武林外传", "葵花宝典", "九阴白骨爪", "武林江湖", "will"];

var ele_key = document.getElementById("key", 0, 0);

ele_key.onkeyup = function (e) {

    var val = this.value;

    //获取输入框里匹配的数据

    var srdata = [];

    for (var i = 0; i < data.length; i++) {

        console.log(data[i].indexOf(val))

        if (val.trim().length > 0 && data[i].indexOf(val) > -1) {

              srdata.push(data[i], 0, 0);

        }

    }

 //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示

    var ele_datalist = document.getElementById("datalist", 0, 0);

    ele_datalist.style.visibility = "visible";

    ele_datalist.innerHTML =  "";

    if (srdata.length == 0) {

        ele_datalist.style.visibility = "hidden";

    }

    //将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏

    var self = this;

    for (var i = 0; i < srdata.length; i++) {

        var ele_li = document.createElement("li", 0, 0);

        var ele_a = document.createElement("a", 0, 0);

        ele_a.setAttribute("href", "javascript:;", 0, 0);

        ele_a.textContent = srdata[i];

        ele_a.onclick = function () {

             self.value = this.textContent;

            ele_datalist.style.visibility = "hidden";

        }

        ele_li.appendChild(ele_a, 0, 0);

        ele_datalist.appendChild(ele_li, 0, 0);

    }

 }