像百度一样的搜索框js

最新推荐文章于 2024-07-29 07:45:00 发布

weixin_42187290

最新推荐文章于 2024-07-29 07:45:00 发布

阅读量768

点赞数 1

文章标签：搜索框样式像百度一样的搜索框

本文链接：https://blog.csdn.net/weixin_42187290/article/details/86312744

版权

本文介绍了一个使用JavaScript实现的实时搜索建议功能，通过监听文本框输入事件来显示或隐藏搜索建议列表，并利用AJAX请求从服务器获取相关数据。该功能包括显示搜索建议、隐藏建议列表、点击建议项填充输入框等交互细节。

摘要由CSDN通过智能技术生成

样式可能很丑！但是主要是JS 的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.clearfix:after {
		    content: "";
		    display: block;
		    visibility: hidden;
		    clear: both;
		    height: 0;
		    font-size: 0;
		}
		.show {
			width: 50%;
			margin-top: 20%;
			margin-left: 25%;
		}
		.input_text {
			width: 65%;
			margin-left: 5%;
			line-height: 25px;
			float: left;
		}
		.input_button{
			border: 0;
			height: 31px;
			width: 20%;
			background: #3385FF;
			color: #FFFFFF;
			line-height: 31px;
			float: left;
		}
		.search {
			width: 65%;
			margin-left: 5%;
			margin-top: 2px;
			border: 1px solid #ccc;
			display: none;
		}

		ul {
			border: 0;
			margin: 0;
			padding:0;
			list-style: none;
		}

		li {
			line-height: 20px;
			font-size: 14px;
			cursor: pointer;
			box-sizing: border-box;
			padding: 2px 10px;
		}

		li:hover {
			background-color: rgb(230, 230, 230);
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var a = document.getElementById("input_val").value
			// 文本框输入的监听事件  有值显示   无值隐藏  
			$(function() {
				$('#input_val').bind('input text', function() {
					a = $('#input_val').val();
					if (a != '') {
						$(".search").show();
					}
					if (a == '') {
						$(".search").hide()
					}
					document.getElementById("input_val").value= a;
					console.log(a)
					
					//   $.ajax;  得到值
$.ajax({
						type: "POST",
						url: "{:url('get_company_list')}",
						data: {
							company_name: a
						},
						dataType: "json",
						success: function(data) {
							console.log(data)
							var grade = $("#grade");
							var lis = "";
							for (var i = 0; i < data.length; i++) {
								// console.log(data[i])
								lis += "<li >" + data[i] + "</li>";
							}
							grade.html(lis);
						}
					});
					//   循环到   HTML  上面
				});
			})
			// 点击页面所有的  区域    隐藏   
			$("body").click(function() {
				$(".search").hide()
			})
             // 获取 li的点击事件  得到值  赋值 然后隐藏   
			$(".search ul li").click(function() {
				var item = $(this).index(); //获取索引下标 也从0开始
				document.getElementById("input_val").value= $(this).text();
				// $(".search").hide()    // 因为有所有区域隐藏所有不需要
			})

	// 未来的点击事件
			$("ul#grade").on("click", "li", function() { //只需要找到你点击的是哪个ul
				var item = $(this).index(); //获取索引下标 也从0开始
				document.getElementById("input_val").value = $(this).text();

			});
		});
		
	</script>

	<body>
		<div class="show">
			<div class="clearfix">
				<input class="input_text" type="text" id="input_val" value="">
				<input class="input_button" type="button" value="百度一下">
			</div>
			<div class="search clearfix">
				<ul id='grade'>
					<li>我爱我家</li>
					<li>我爱我家</li>
					<li>我想好好的生活</li>
					<li>我爱我家</li>
					<li>我想好好的生活</li>
					<li>我想好好的生活</li>
				</ul>
			</div>
		</div>
	</body>
</html>

.ajax 因为没有服务器数据所有只写到这里