自定义可搜索的select下拉框

最新推荐文章于 2024-08-24 09:19:42 发布

绕数吃炸鸡

最新推荐文章于 2024-08-24 09:19:42 发布

阅读量619

点赞数

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/weixin_45518137/article/details/120920246

版权

本文档详细介绍了如何使用JavaScript实现一个带有搜索功能的Select下拉框。通过HTML布局，CSS美化和JS逻辑，实现了下拉选项的筛选和显示效果。

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

自定义可搜索的select下拉框

- 实例
- html
- css
- js

实例

在这里插入图片描述

html

<div class="t-select-box" id="t-select-box-engine" data-value="" data-text="" data-query-field-name="" data-name="engine">
	<div class="t-select">
		<input class="t-select-search form-control" value="<?= $filter_engine; ?>" autocomplete="off" type="text" placeholder="Engine" name="engine" />
		<i class="t-select-clear" style="font-size: 16px;color: #678">
			<svg t="1577170763461" class="icon svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11750" width="200" height="200">
				<path d="M509.866667 32C245.333333 32 32 247.466667 32 512s213.333333 480 477.866667 480S987.733333 776.533333 987.733333 512 774.4 32 509.866667 32z m0 896C281.6 928 96 742.4 96 512S281.6 96 509.866667 96 923.733333 281.6 923.733333 512s-185.6 416-413.866666 416z" fill="#212121" p-id="11751"></path>
				<path d="M693.333333 330.666667c-12.8-12.8-32-12.8-44.8 0L512 467.2l-136.533333-136.533333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l136.533333 136.533333-136.533333 136.533333c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533334s17.066667-2.133333 23.466667-8.533334l136.533333-136.533333 136.533334 136.533333c6.4 6.4 14.933333 8.533333 23.466666 8.533334s17.066667-2.133333 23.466667-8.533334c12.8-12.8 12.8-32 0-44.8L556.8 512l136.533333-136.533333c12.8-12.8 12.8-32 0-44.8z" fill="#212121" p-id="11752"></path>
			</svg>
		</i>
	</div>
	<div class="t-select-dropdown">
		<div class="select-no-data">No results found</div>
		<ul>
			<?php if (!empty($sonMakeList)) foreach ($sonMakeList as $value) : ?>
				<li class="t-select-option" data-value="<?= $value['value'] ?>" value="<?= $value['value'] ?>" <?php if ($filters['make'] == $value['value']) : ?> selected="true" <?php endif; ?>><?= $value['value'] ?></li>
			<?php endforeach; ?>
		</ul>
	</div>
	<select class="form-control" name="engine">
		<option disabled selected value>Engine</option>
		<?php if (!empty($sonMakeList)) foreach ($sonMakeList as $value) : ?>
			<option value="<?= $value['value'] ?>" <?php if ($filters['make'] == $value['value']) : ?> selected="true" <?php endif; ?>><?= $value['value'] ?></option>
		<?php endforeach; ?>
	</select>
</div>

css

<style>
	.newhidden {
   
		display: none;
	}

	.t-select-box {
   
		position: relative;
		line-height: 32px;
		width: 100%;
		padding: 0 !important;
	}

	.t-select-box:after {
   
		content: '';
		position: absolute;
		right: 10px;
		top: 50%;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A8A8A8' viewBox='0 0 1024 1024' version='1.1'%3E%3Cpath d='M510.2 751.653125L93.875 335.3375l59.38125-59.38125 356.94375 356.934375 360.54375-360.54375L930.125 331.728125z' p-id='1128'%3E%3C/path%3E%3C/svg%3E");
		vertical-align: middle;
		width: 12px;
		height: 12px;
		margin-top: -6px;
	}

	.t-select-box .t-select-clear {
   
		display: none;
		position: absolute;
		right: 5px;
		top: 50%;
		width: 20px;
		height: 20px;
		line