一个简单的搜索输入匹配

最新推荐文章于 2023-06-24 20:13:53 发布

原创最新推荐文章于 2023-06-24 20:13:53 发布 · 588 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端基础

前端小白专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML, CSS和jQuery实现的简单搜索输入匹配功能。当用户在输入框中键入文字时，会实时显示与输入内容相匹配的建议列表。通过键盘抬起事件触发匹配，从预设数据集中筛选出包含输入字符串的项，并动态生成匹配项的列表。

html,css,js(jQuery)做一个简单的搜索输入匹配
这里有一个输入框：
在这里插入图片描述
所要达到的效果：往输入框里面输入文字或英文等其他内容时，下面会出现相应匹配：

代码如下：
首先，html:

<div class="inputMatching">
	<input type="text" placeholder="请输入搜索内容" />
	<button type="button">button</button>
</div>
<div class="box">
	
</div>

css:

<style type="text/css">
		body{
			padding: 10px;
		}
		.inputMatching{
			width: 100%;
			overflow: auto;
		}
		input[type="text"]{
			width: 300px;
			height: 35px;
			font-size: 16px;
			padding-left: 5px;
			float: left;
		}
		button{
			width: 60px;
			height:40px;
			float: left;
		}
		.box{
			width: 300px;
			height: 300px;
			overflow: hidden;
		}
		.box li{
			width: 100%;
			height: 35px;
			line-height: 35px;
			border-bottom: solid #ccc 1px;
			list-style: none;
			padding-left: 15px;
			cursor: pointer;
		}
	</style>

js:

<script type="text/javascript">
			$(function(){
				var data = ["公司","食堂","政体","证券","天然气","学院","媒体","湖南广播电视大学","湖南卫视","科技工程学院","工程职业技术学院"];
				//这个data一般是从后端传过来的数据
				$(".inputMatching input").keyup(function(){ //键盘抬起事件，触发匹配
					var inputValue= $(this).val(); //获得输入框的值
					console.log(inputValue);
					search(inputValue);
				})
				function search(e){  // *search函数*
					var arr1 =[];
					for(var i=0;i<data.length;i++){
						if(data[i].indexOf(e) >=0){
							arr1.push(data[i]);
						}
					}
					console.log(arr1);
						for(var j=0;j<arr1.length;j++){
							var li = document.createElement("li");
							var text1 =arr1[j];
							li.append(text1);
							$('.box').append(li);
							//var arr2=[];
						}
						$(".box li").click(function(){
							var litext=$(this).text();
							$(".inputMatching input").val(litext);
							$(".box").empty();
						});
						var values= $(".inputMatching input").val(); 
						if(values ==""){
							$(".box").empty();
						}
				}
				
			})
		</script>