Searchable select option

Question

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.

Hi @user2748728, could you consider accepting one of the given answers, or giving feedback if none of them was helpful? — Andrea Casaccia, Jul 01 '15 at 10:32
I updated my answer with a method for including external scripts with Javascript. — Andrea Casaccia, Jul 02 '15 at 09:53
You can use this "Full option searchable select box": https://stackoverflow.com/a/56590636/6569224 — Mahdi Bashirpour, Sep 28 '19 at 11:12

score 9 · Accepted Answer · answered Jun 30 '15 at 08:48

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>

You can use JavaScript to include another JS. – Praveen Kumar Purushothaman Jun 30 '15 at 14:21 — Praveen Kumar Purushothaman, Jun 30 '15 at 14:21

score 2 · Answer 2 · answered Apr 22 '21 at 04:46

2

Ok, I understand that you cannot change the select to anything else but those who are searching for similar thing and can change the select to datalist, it is very simple:

<input list="weekday">
<datalist id="weekday">
  <option value="Sunday">
  <option value="Monday">
  <option value="Tuesday">
  <option value="Wednesday">
  <option value="Thursday">
  <option value="Friday">
  <option value="Saturday">
</datalist>

answered Apr 22 '21 at 04:46

Hari Das

9,108
7
52
58

Oh man, I couldn't believe it can be that simpler. – Usman Ahmed Dec 11 '21 at 11:44

score 0 · Answer 3 · edited May 23 '17 at 10:30

You can use javascript to include other scripts like explained here:

How do I include a JavaScript file in another JavaScript file?

function includeJs(jsFilePath) {
    var js = document.createElement("script");

    js.type = "text/javascript";
    js.src = jsFilePath;

    document.body.appendChild(js);
}

Then you could solve your problem using Selectize:

includeJs("https://code.jquery.com/jquery-2.1.4.min.js");
includeJs("https://cdn.rawgit.com/brianreavis/selectize.js/master/dist/js/standalone/selectize.js");

$(function() {
    $('select').selectize();
});

You will also need to include in your css the rules from selectize.css (or you could create a link element using a similar includeCss function in Javascript)

https://jsfiddle.net/qpyhjydp/

Note that in the fiddle I fixed the autoclosing <select /> (not allowed)

Add some details? Why it doesn't work? What errors are you getting? You won't get much help on this site if you don't show your efforts. — Andrea Casaccia, Jul 03 '15 at 07:48

score 0 · Answer 4 · edited Jun 07 '18 at 16:52

Display: none will not work foe IE11

I had same issue for search in select option.

What I did is disabled the un matched options and the hide them.

After this I have sorted the options to show only enabled options on top.

The code I have written is pasted below - please try to understand the logic I hope it will work

to disable the options use:

$("#addselect option")attr('disabled', 'disabled').hide

and to again enable it use:

$("#addselect option").removeAttr('disabled').show();

to sort by disabled options:

$("#addselect option").each(function (i, val) {
    if ($(this)[i].disabled) {
        moveDown("selectId");
    }
    else {
        moveUp("selectId");
    }
}

function moveUp(selectId) {
    var selectList = document.getElementById(selectId);
    var selectOptions = selectList.getElementsByTagName('option');
    for (var i = 1; i < selectOptions.length; i++) {
        var opt = selectOptions[i];
        if (!opt.disabled) {
            selectList.removeChild(opt);
            selectList.insertBefore(opt, selectOptions[i - 1]);
        }
    }
}

function moveDown(selectId) {
    var selectList = document.getElementById(selectId);
    var selectOptions = selectList.getElementsByTagName('option');
    for (var i = selectOptions.length - 2; i >= 0; i--) {
        var opt = selectOptions[i];
        if (opt.disabled) {
            var nextOpt = selectOptions[i + 1];
            opt = selectList.removeChild(opt);
            nextOpt = selectList.replaceChild(opt, nextOpt);
            selectList.insertBefore(nextOpt, opt);
        }
    }
}

score 0 · Answer 5 · answered Oct 30 '19 at 09:08

0

Full option searchable select box

That also supports Control buttons keyboards such as ArrowDown ArrowUp and Enter keys

https://stackoverflow.com/a/56590636/6569224

answered Oct 30 '19 at 09:08

Mahdi Bashirpour

13,853
11
101
132

score 0 · Answer 6 · answered Jun 27 '21 at 00:28

0

Check out Chosen.

I tried both select2 and selectize and neither worked properly for me. I'm using jQuery 3.6. Chosen worked first try.

answered Jun 27 '21 at 00:28

Timothy C. Quinn

2,756
1
30
39

score 0 · Answer 7 · answered May 05 '22 at 07:38

0

For those who are using bootstrap in their project, a searchable select can be made using dropdown buttons. Add an input field inside the dropdown menu and use javascript to filter through the options.

A detailed explanation with example can be found on the following blog:

https://medium.com/@akshat_yadav/searchable-select-in-bootstrap-16353b93c96d

answered May 05 '22 at 07:38

Akshat Yadav

23
1
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 05 '22 at 13:01
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31697708) – Kai-Sheng Yang May 10 '22 at 15:06

Searchable select option

7 Answers7

Linked