自定义可搜索的select下拉框

实例

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:</