Question

32

Searchable select option

rated 0 times [ 35] [ 3] / answers: 1 / hits: 50598 / 9 Years ago, tue, june 30, 2015, 12:00:00

Is there anyway to make select option as selectable/auto complete/searchable? unfortunately i cannot change the form. so i cannot change the select option into text field. but i be able to access the css and javascript..

Below is the select option.

<select name=siteID id=siteID class=abcd style=width:100% /> 

            <option value='0' selected='true'> Not associated to any Circuit ID </option>

            <option value='2101' > 1007345136 </option> 

            <option value='2102' > 1007921321 </option> 

            <option value='2103' > 1007987235 </option> 

            <option value='2407' > 132 </option> 

            <option value='2408' > 141 </option> 

            <option value='2409' > 142 </option> 

            <option value='2410' > 145 </option> 

            <option value='2701' > 225 </option> 

            <option value='2702' > 248 </option> 

            <option value='2703' > 251 </option> 

            <option value='2704' > 254 </option> 

            <option value='2705' > 264 </option> 

            <option value='1804' > 27 </option> 

            <option value='2706' > 274 </option> 

            <option value='2707' > 310 </option> 

            <option value='2708' > 311 </option> 

            <option value='3001' > 333 </option> 

            <option value='2401' > 38 </option> 

            <option value='2402' > 64 </option> 

            <option value='2403' > 68 </option> 

            <option value='2404' > 69 </option> 

            <option value='2405' > 76 </option> 

            <option value='2406' > 81 </option> 

            <option value='2411' > abc123post </option> 

            <option value='3301' > circuit id 50 </option> 

            <option value='2105' > fadhil </option> 

            <option value='2104' > faisal </option> 

            <option value='3002' > IPEN - SITE TEST </option> 

            <option value='3601' > Manual Circuit ID </option> 

            <option value='3302' > new circuit id fadhil </option> 

            <option value='1809' > try iframe </option> 

        </select>

is there any javascript/jquery and css that can transform it as serchable.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janettejordynm

Add To Favorites

Follow

Total Points: 550

Total Questions: 94

Total Answers: 98

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

janettejordynm questions

1 Chunk file upload with axios

Tue, Nov 24, 20, 00:00, 4 Years ago

1 Node unable to find module alias defined in tsconfig and package.json

Thu, Jun 18, 20, 00:00, 4 Years ago

1 How to check if an entered answer is correct with HTML code?

Sat, May 23, 20, 00:00, 4 Years ago

1 Can someone explain this piece of Javascript code?

Mon, Apr 6, 20, 00:00, 4 Years ago

1 AES Encryption/Decryption in Node JS similar to Java

Tue, Feb 18, 20, 00:00, 4 Years ago

View All

answered 9 Years ago katelynn · Accepted Answer

You may consider using a jQuery plugin called Select2. You cannot self-close a <select> tag! You can just use it this way:

$(function () {

  $(select).select2();

});

@import url(https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css);

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js></script>

<select name=siteID id=siteID class=abcd style=width:100%>

  <option value='0' selected='true'> Not associated to any Circuit ID </option>

  <option value='2101' > 1007345136 </option> 

  <option value='2102' > 1007921321 </option> 

  <option value='2103' > 1007987235 </option> 

  <option value='2407' > 132 </option> 

  <option value='2408' > 141 </option> 

  <option value='2409' > 142 </option> 

  <option value='2410' > 145 </option> 

  <option value='2701' > 225 </option> 

  <option value='2702' > 248 </option> 

  <option value='2703' > 251 </option> 

  <option value='2704' > 254 </option> 

  <option value='2705' > 264 </option> 

  <option value='1804' > 27 </option> 

  <option value='2706' > 274 </option> 

  <option value='2707' > 310 </option> 

  <option value='2708' > 311 </option> 

  <option value='3001' > 333 </option> 

  <option value='2401' > 38 </option> 

  <option value='2402' > 64 </option> 

  <option value='2403' > 68 </option> 

  <option value='2404' > 69 </option> 

  <option value='2405' > 76 </option> 

  <option value='2406' > 81 </option> 

  <option value='2411' > abc123post </option> 

  <option value='3301' > circuit id 50 </option> 

  <option value='2105' > fadhil </option> 

  <option value='2104' > faisal </option> 

  <option value='3002' > IPEN - SITE TEST </option> 

  <option value='3601' > Manual Circuit ID </option> 

  <option value='3302' > new circuit id fadhil </option> 

  <option value='1809' > try iframe </option> 

</select>