js小项目：搜索框内容实现自动查询

最新推荐文章于 2024-06-06 17:52:07 发布

我家空空

最新推荐文章于 2024-06-06 17:52:07 发布

阅读量968

点赞数

分类专栏：前端练习文章标签： js

原文链接：https://www.cnblogs.com/uncle-kay/p/10763183.html

版权

前端练习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.添加键盘抬起事件

2.获取文本框的内容

3.判断文本框的内容是否为空

4.不为空判断是否与数组里的内容匹配

5.创建元素将查到的内容显示出来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
	"use stricts";
	//创建数组，用来存储元素样板
	var keyWords = ['iphonex','华为p20pro','小米8','华为nova3','小辣椒','iphonexr','iphone8', '小米max3'];
	var box=document.getElementById('box');
	var txt=document.getElementById('txt');
	function fn(){
		//判断有没有ul元素
		if(document.getElementById('shelper')){
			let shelper = document.getElementById('shelper')
            box.removeChild(shelper);
		}
	
	    if(txt.value===null||txt.value.trim()===""){
            if(document.getElementById('shelper')){
                let shelper = document.getElementById('shelper');
                box.removeChild(shelper);
            }
            return;
        }

        var tempArr = [];
        for(var i=0;i<keyWords.length;i++){
            if(keyWords[i].indexOf(txt.value.trim())!=-1){
                tempArr.push(keyWords[i]);
            }
        }
        if(tempArr.length===0){
            if(document.getElementById('shelper')){
                let shelper=document.getElementById('shelper');
                box.removeChild(shelper);
            }
            return;
        }

        // 创建ul
        var ulObj = document.createElement('ul');
        box.appendChild(ulObj);
        ulObj.id = 'shelper';
        ulObj.style.width = '350px';
        ulObj.style.border = '1px solid red';
        // 创建li
        tempArr.forEach(function (item) {
            var liObj = document.createElement('li');
            liObj.innerText = item;
            liObj.style.padding = '5px 0 5px 5px';
            liObj.style.cursor = 'pointer';
            ulObj.appendChild(liObj);
            // 绑定鼠标进入事件
            liObj.addEventListener('mouseover', mouseOver, false);
            // 绑定鼠标离开事件
            liObj.addEventListener('mouseout', mouseOut, false);
        });

        // 鼠标进入事件
        function mouseOver() {
            this.style.backgroundColor = '#ccc';
        }
        // 标离开事件
        function mouseOut() {
            this.style.backgroundColor = '';
        }

    }

    // 为文本框绑定键盘抬起事件
    //输入完成时，执行函数fn()
    txt.addEventListener('keyup', fn, false);
  </script>
  <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 {

    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
  </style>
</head>
<body>

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