搜索框输入自动提示功能实现

最新推荐文章于 2025-03-29 15:51:40 发布

只是没头发罢了

最新推荐文章于 2025-03-29 15:51:40 发布

阅读量1.7k

点赞数 3

本文链接：https://blog.csdn.net/weixin_43699489/article/details/115301779

版权

本文介绍了一个基于layui的HTML和JS实现的搜索框自动提示功能。通过监听输入框的oninput和onpropertychange事件，动态生成匹配输入内容的提示列表，并在用户离开输入框时隐藏提示。示例代码展示了如何创建样式、设置事件处理以及从预定义数据数组中筛选匹配项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搜索框输入自动提示功能实现

- html部分核心代码
- JS部分核心代码

原项目是基于layui的工程，实现功能：搜索框输入数据，根据后端返回的数据匹配自动提示
效果如下图
在这里插入图片描述

在这里插入图片描述

html部分核心代码

 <style>
.content input[type=text]{
        width: 150px;
        height: 32px;
        outline: none;
        padding-left: 8px;
    }
    .list{
        z-index: 2;
        position: absolute;
        background-color: #ffffff;
    }
    .list ul{
        width:120px ;
        clear: both;
        border: 1px solid #A9A9A9;
        display: none;
        list-style: none;
		margin:0px;
    }
    .list ul li{
        padding-left: 8px;
    }
    .list ul li:hover{
        background-color: #CCC;
    }
</style>
<div>
	<div class="layui-input-inline content" style="width: 150px; margin-right: 10px;">
			<input type="text" id="content" class="layui-input table-toolbar-ele" placeholder="请输入搜索内容" autocomplete="off">
	</div>
	<div class="list"><ul id="ul"></ul></div>
</div>

JS部分核心代码

var dataList=["001","002","003"];		//此处应为处理好的提示数据数组，我仅举例记录

//输入自助机编号搜索提示
var ul=document.getElementById("ul");
var content_div=document.getElementById("content");

//当用户离开输入字段时对其进行验证：
content_div.onblur = function (){
     content_div.style.borderColor = "initial";
     ul.style.display = "none";
 }
//当元素获得用户输入时运行的脚本
content_div.oninput = function(){
    selectKeys();
}
content_div.onpropertychange = function(){
    selectKeys();
}
function selectKeys() {
           //var value=$("#content").val()		//Jquery写法
           var value=document.getElementById("content").value;
           if(value != ""){
               ul.innerHTML = "";
               for (var i=0;i<dataList.length;i++) {
                   if(dataList[i].indexOf(value.toUpperCase())==0){
                       var li=document.createElement("li");
                       li.innerHTML=dataList[i];
                       li.onmousedown=function (){     //为li动态添加事件,(此处使用onmousedown而非onclick，主要解决onblur与onclick事件时的冲突问题)
                           //$("#content").val(this.innerHTML);	  //Jquery写法
                           document.getElementById("content").value=this.innerHTML;
                       }
                       ul.appendChild(li);
                       ul.style.display="block";
                   }
               }
           }else{
               ul.style.display="none";
           }
   }