JS搜索框自动提示

发表于 | 分类于 |


效果展示：

html部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
  <style>
    #box {
      width: 450px;
      margin: 200px auto;
    }

    #txt {
      width: 350px;
    }

    #pop {
      width: 350px;
      border: 1px solid red;
    }

    #pop ul {
      margin: 10px;
      padding: 0px;
      width: 200px;
      list-style-type: none;

    }

    #pop ul li {

    }
  </style>
</head>
<body>

<div id="box">
  <input type="text" id="txt" value="">
  <input type="button" value="搜索" id="btn">

</div>
</body>


JavaScript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script>
	function my$(id){ return document.getElementById(id);}

	function setInnerText(element, text) {
    if (typeof element.textContent == "undefined") {
        element.innerText = text;
    } else {
        element.textContent = text;
    }
}



  var keyWords = [
  "小林才是最纯洁的", 
  "小林才是最帅的", 
  "小明是最胖的", 
  "小明是最高的", 
  "三国是我最喜欢的", 
  "三星note7会爆炸",
  "苹果好吃", 
  "苹果此次召回还是没有中国"];
  //获取文本框注册键盘抬起事件
  my$("txt").onkeyup = function () {


    //每一次的键盘抬起都判断页面中有没有这个div
    if(my$("dv")){
      //删除一次
      my$("box").removeChild(my$("dv"));
    }
    //获取文本框输入的内容
    var text = this.value;
    //临时数组--空数组------->存放对应上的数据
    var tempArr = [];
    //把文本框输入的内容和数组中的每个数据对比
    for (var i = 0; i < keyWords.length; i++) {
      //是否是最开始出现的
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);//追加
      }
    }
    //如果文本框是空的,临时数组是空的,不用创建div
    if (this.value.length == 0 || tempArr.length == 0) {
      //如果页面中有这个div,删除这个div
      if (my$("dv")) {
        my$("box").removeChild(my$("dv"));
      }
      return;
    }
    //创建div,把div加入id为box的div中
    var dvObj = document.createElement("div");
    my$("box").appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "350px";
    //dvObj.style.height="100px";//肯定是不需要的，由内容撑开
    dvObj.style.border = "1px solid green";
    //循环遍历临时数组,创建对应的p标签
    for (var i = 0; i < tempArr.length; i++) {
      //创建p标签
      var pObj = document.createElement("p");
      //把p加到div中
      dvObj.appendChild(pObj);
      setInnerText(pObj, tempArr[i]);
      pObj.style.margin = 0;
      pObj.style.padding = 0;
      pObj.style.cursor = "pointer";
      pObj.style.marginTop = "5px";
      pObj.style.marginLeft = "5px";
      //鼠标进入
      pObj.onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      pObj.onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }


  };


</script>