如何搜索长下拉选项/选择列表

How to search a long dropdown option / select list?

本文关键字:选项 选择 列表 何搜索 搜索      更新时间:2023-09-26

我目前正在制作一个网站,用于jquery插件ddslick来制作图像下拉列表。我选择做状态进行练习,我想知道如何使用jquery来搜索它,因为它是一个插件?

<div id="myDropdown"></div>
<select id="states" name="states" class="custom-select">
     <option value="1" data-imagesrc="stateflags/compass.png" id="va"  data-description="Choose your destination" > Explore</option>
     <option value="2" data-imagesrc="stateflags/ak.png" id= "nc" data-description="Alaska"> Alaska </option>
     <option value="3" data-imagesrc="stateflags/az.png" id= "nc" data-description="Arizona"> Arizona </option>
     <option value="4" data-imagesrc="stateflags/ar.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="5" data-imagesrc="stateflags/ca.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="6" data-imagesrc="stateflags/co.png" id= "nc" data-description="formRegister"> North Carolina </option>
     <option value="7" data-imagesrc="stateflags/ct.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="8" data-imagesrc="stateflags/de.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="9" data-imagesrc="stateflags/fl.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="10" data-imagesrc="stateflags/ga.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="11" data-imagesrc="stateflags/hi.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="12" data-imagesrc="stateflags/id.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="13" data-imagesrc="stateflags/il.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="14" data-imagesrc="stateflags/in.png" id= "nc" data-description="North Carolina"> Indiana </option>
     <option value="15" data-imagesrc="stateflags/ia.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="16" data-imagesrc="stateflags/ks.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="17" data-imagesrc="stateflags/ky.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="18" data-imagesrc="stateflags/la.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="19" data-imagesrc="stateflags/me.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="20" data-imagesrc="stateflags/md.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="21" data-imagesrc="stateflags/ma.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="22" data-imagesrc="stateflags/mi.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="23" data-imagesrc="stateflags/mn.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="24" data-imagesrc="stateflags/ms.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="25" data-imagesrc="stateflags/mo.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="26" data-imagesrc="stateflags/mt.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="27" data-imagesrc="stateflags/ne.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="28" data-imagesrc="stateflags/nv.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="29" data-imagesrc="stateflags/nh.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="30" data-imagesrc="stateflags/nj.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="31" data-imagesrc="stateflags/nm.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="32" data-imagesrc="stateflags/ny.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="33" data-imagesrc="stateflags/nc.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="34" data-imagesrc="stateflags/nd.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="35" data-imagesrc="stateflags/oh.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="36" data-imagesrc="stateflags/ok.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="37" data-imagesrc="stateflags/or.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="38" data-imagesrc="stateflags/ri.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="39" data-imagesrc="stateflags/sc.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="40" data-imagesrc="stateflags/sd.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="41" data-imagesrc="stateflags/tn.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="42" data-imagesrc="stateflags/tx.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="43" data-imagesrc="stateflags/ut.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="44" data-imagesrc="stateflags/vt.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="45" data-imagesrc="stateflags/va.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="46" data-imagesrc="stateflags/wa.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="47" data-imagesrc="stateflags/wv.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="48" data-imagesrc="stateflags/wi.png" id= "nc" data-description="North Carolina"> North Carolina </option>
     <option value="49" data-imagesrc="stateflags/wy.png" id= "nc" data-description="North Carolina"> North Carolina </option>
</select>
<script type="text/javascript">
    $(document).ready( function(){
        $('#states').ddslick();
    });
</script>

据我所知,ddslick 不是用于过滤,它只是用于插入图像作为选项。

我建议使用不同的插件 select2 并将 img 插入选项 Select2 动态添加图像图标到选项