Jquery select模糊查询

最新推荐文章于 2024-02-21 14:15:55 发布

fusheng-fate

最新推荐文章于 2024-02-21 14:15:55 发布

阅读量2k

点赞数 1

分类专栏：工具文章标签： select模糊搜索

本文链接：https://blog.csdn.net/lgb1997/article/details/109953869

版权

工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

模糊搜索下拉列表(单选)

带搜索功能的下拉列表，优雅、简单，保存记录一下。

引入jquery包

<script src="../js/jquery-3.3.1.min.js"></script>

引入js文件、css样式文件

<script src="../js/jquery.searchableSelect.js"></script>
<link rel="stylesheet" href="../css/jquery.searchableSelect.css" />

调用 searchableSelect()函数
<script> $('#selectUser').searchableSelect(); </script>

测试文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/jquery.searchableSelect.js"></script>
		<link rel="stylesheet" href="../css/jquery.searchableSelect.css" />
	</head>
	<body>
		<div id="ss">
			<select id="selectUser">
				<option value="1">张三</option>
				<option value="2">李四</option>
				<option value="3">王五</option>
				<option value="4">赵六</option>
			</select>
		</div>
		<script>
			$('#selectUser').searchableSelect();
		</script>
	</body>
</html>

效果图

在这里插入图片描述
文件下载地址：https://pan.baidu.com/s/1FYKisPL_PcilPAQ58dBd4A
提取码：3snl

PS:11-26补充在实际使用时遇到两个问题，附上解决方案

问题1：

下拉列表被下方的html遮挡。

解决方案

问题二

下方的下拉列表被已有模板遮挡，导致有三行数据显示不出来。

<style>
    .searchable-select-items {
        max-height: 300px; //调整原有的400px改成300px或者更小一点
        overflow-y: scroll;
        position: relative;
    }
</style>