jquery 下拉搜索列表适用于PC和移动端

最新推荐文章于 2021-10-26 11:26:36 发布

developerFBI

最新推荐文章于 2021-10-26 11:26:36 发布

阅读量573

点赞数 1

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/developerfbi/article/details/106415618

版权

前端开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1、先看下效果，在输入框内输入"c"，显示如下图:

2、直接贴代码:

<HTML>
<HEAD>
<TITLE>下拉框</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style type="text/css">
		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
			margin:0; 
			padding:0; 
		}
		
		.program-select input{
			outline: none;
			cursor: pointer;
			width: 14em;
			height: 1.8em;
			font-size: 1em;
			border: 1px solid #000;
			background: url(image/icon.png) no-repeat scroll right center transparent;
			background-position: 96% 50%;
			padding: 0 10px;
			-webkit-border-radius: .3em;
			-moz-border-radius: .3em;
			border-radius: .3em;
			position: absolute;
			line-height: 1.8em;
		}
		
		ul{
			list-style: none;
		}
		
		.program-select{
			position: relative;
			width: 14em;
			top: 2em;
			margin: 0 auto;
			box-shadow: 0 3px 5px #999;
			-webkit-border-radius: .3em;
			-moz-border-radius: .3em;
			border-radius: .3em;
		}
		
		.program-select ul{
			display: none;
			border: 1px solid #d5d5d5;
			width: 13.9em;
			position: absolute;
			top: 1.8em;
			overflow: hidden;
			background-color: #fff;
			max-height: 150px;
			overflow-y: auto;
			border-top: 0;
			z-index: 10001;
		}
		
		.program-select ul li{
			height: 30px;
			line-height: 2em;
			overflow: hidden;
			padding: 0 10px;
			cursor: pointer;
			border-top: 1px solid #d5d5d5;
		}
		
		.program-select ul li.on{background-color: #e0e0e0;}
		
		
		.input{
			height: 28px;
			width: 200px;
			outline: none;
			padding: 0 5px;
			-webkit-border-radius: .3em;
			-moz-border-radius: .3em;
			border-radius: .3em;
			border: 1px solid #000;
		}
		
		
	</style>
	<script type="text/javascript">
		$(function(){
			$(".program-select").click(function(e){
				$(this).find("ul").show();
				e.stopPropagation();
			});
			
			$('#list').delegate('li','mouseover mouseout',function(e){
				$(this).toggleClass("on");
				e.stopPropagation();
			});
			
			$('#list').delegate('li','click',function(e){
				var val = $(this).text();				
				$(".nice-select").find("input").val(val);
				$(".nice-select").find("ul").hide();
				e.stopPropagation();
			});
			
			$(document).click(function(){
				$(".program-select").find("ul").hide();
			});
			
			
		});
		
		function searchList(strValue) {
			var count = 0;
			if (strValue != "") {
				$(".program-select ul li").each(function(i) {
					var contentValue = $(this).text();
					if (contentValue.toLowerCase().indexOf(strValue.toLowerCase()) < 0) {
						$(this).hide();
						count++;
					} else {
						$(this).show();
					}
					if (count == (i + 1)) {
						$(".program-select").find("ul").hide();
					} else {
						$(".program-select").find("ul").show();
					}
				});
			} else {
				$(".program-select ul li").each(function(i) {
					$(this).show();
				});
			}
		}
		
	</script>
</HEAD>
<BODY>
<br>
<div class="program-select">
	<input id="programId" type="text" oninput="searchList(this.value)" />
	<ul id="list">
		<li>Java web</li>
		<li>Kotlin</li>
		<li>PHP</li>
		<li>HTML</li>
		<li>jQuery</li>
		<li>Android</li>
		<li>Code C</li>
		<li>C++</li>
		<li>Struts</li>
		<li>hibernate</li>
		<li>phython</li>
		<li>spring</li>
		<li>SpringCloud</li>
		<li>javascript</li>
	</ul>
</div>
</BODY>
</HTML>

大家使用有问题可以直接发评论。