-2

I am currently making a site that uses to jquery plugin ddslick to make a dropdown list of images. I choose to do the states for practice and I would like to know of how may use jquery to search it since it is a plugin?

<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>
rrk
  • 15,677
  • 4
  • 29
  • 45
kylel95
  • 139
  • 1
  • 6
  • 14

1 Answers1

0

From what I can see ddslick is not for filtering, it's just for inserting images as options.

I'd suggest using different plugin select2 and insert img to option Select2 add image icon to option dynamically

Community
  • 1
  • 1
charlie
  • 69
  • 5