如何做一个可输入的下拉框，进行模糊匹配
1.引入jquery
2.样式调整
3.完整代码如下：
在这里插入代码片```<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="format-detection" content="telephone=no"><title>清城</title><script type="text/javascript" src="js/jquery.min.js"></script><style>.qcdromodel{width: 500px;margin: 0 auto}.qc-dromodel{display: none;}ul li{list-style: none;}</style></head><body><section><div class="qcdromodel" style="margin-left: 5%;"><select class="" id="industryOf" name="industryOf" onclick="onezs();" style="height: 24px;width: 170px;height: 30px;-moz-appearance: none;pointer-events: none;"><option value=""></option></select><input type="text" id="onezs" class="qc-zsearch" onclick="onezs();" style="height: 24px; width: 150px; position: absolute; left: 5%;" readonly="readonly" placeholder="输入相应颜色"><ul class="qc-dromodel" id="modedata" style="padding-left: 0px;margin-top: 0px;width: 170px;display: none;margin-left: -7px;"><input type="text" id="twoxj" class="qc-search" placeholder="输入相应颜色" style="height: 24px; width: 150px; position: absolute; left: 5%;top: 8px;"><ul class="qc-dromodel_1" style="overflow: scroll;height: 300px;background-color: rgb(0, 188, 212);width: 100%;padding-left: 10px;display: block;"><li><a href="javascript:;">红色</a></li><li><a href="javascript:;">大红色</a></li><li><a href="javascript:;">水红色</a></li><li><a href="javascript:;">粉红色</a></li><li><a href="javascript:;">黄hyhf色</a></li><li><a href="javascript:;">黄dahjdf色</a></li><li><a href="javascript:;">黄hydadhf色</a></li><li><a href="javascript:;">黄hyshf色</a></li><li><a href="javascript:;">黄h11yhf色</a></li><li><a href="javascript:;">黄hkolhf色</a></li><li><a href="javascript:;">黄hyhf5842色</a></li><li><a href="javascript:;">黄hyh*fsf色</a></li><li><a href="javascript:;">黄hy44hf色</a></li><li><a href="javascript:;">黄hy65hf色</a></li><li><a href="javascript:;">黄色</a></li><li><a href="javascript:;">蓝色</a></li><li><a href="javascript:;">橙色01</a></li><li><a href="javascript:;">橙色02</a></li><li><a href="javascript:;">橙色03</a></li><li><a href="javascript:;">橙色040</a></li><li><a href="javascript:;">橙色05</a></li><li><a href="javascript:;">黑色</a></li><li><a href="javascript:;">黑色B856YTS85R900</a></li><li><a href="javascript:;">白0色</a></li><li><a href="javascript:;">白1色</a></li><li><a href="javascript:;">白2色</a></li><li><a href="javascript:;">白3色</a></li><li><a href="javascript:;">白4色</a></li><li><a href="javascript:;">白5色</a></li></ul></ul></div></section></body><script type="text/javascript">$(document).ready(function(){//点击空白收回下拉框$('.wew').click(function () {alert(11);$('.qc-dromodel').hide();});//搜索条件查询$(".qc-search").on('input propertychange', function () {var searchTerm = $(this).val();$(this).siblings('.qc-dromodel_1').show();$(this).addClass('cli');var searchSplit = searchTerm.replace(/ /g, "'):containsi('");$.extend($.expr[':'], {'containsi': function(elem, i, match, array) {return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;}});$(this).siblings('.qc-dromodel_1').find('li').not(":containsi('" + searchSplit + "')").each(function() {$(this).hide();});$(this).siblings('.qc-dromodel_1').find("li:containsi('" + searchSplit + "')").each(function() {$(this).show();});});// input 输入框点击事件$('.qcdromodel').on('click', function(e){$(".qcdromodel").find("ul").hide();// 让ul隐藏（当你一个页面多个这样的输入框时你就会用到）$(this).find('ul').show();// 当前子节点显示e.stopPropagation();// 阻止事件冒泡});// 下拉框里面内容收起$('.qc-dromodel li a').on('click', function(e) {$("#onezs").css("display","block");$("#onezs").css("top","8px");$(this).parents('.qc-dromodel').hide().siblings('.qc-zsearch').removeClass('selected').removeClass('cli').val($(this).text());e.stopPropagation();// 阻止事件冒泡});});function onezs() {$("#onezs").css("display","none");}</script></html>
