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 14 · 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 6 · Answer 2 · answered Apr 22 '21 at 04:46

6

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

10,145
7
62
59

1

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

Timothy C. Quinn · Answer 3 · 2023-05-04T20:23:55.393

3

Check out Chosen.

I tried both select2 and selectize and neither worked properly for me. I'm currently using jQuery 1.9.x. Chosen worked first try on 3.6 with basic tests but not sure if it will work well in current jQuery versions with all browsers.

[Update] In my production environments, I'm using jQuery 1.9.x with Chosen and it runs rock solid for my usecases.

edited May 04 '23 at 20:23

answered Jun 27 '21 at 00:28

Timothy C. Quinn

3,739
1
35
47

1

Nice option, but according to their GitHub - it is deprecated. – DannyB Aug 09 '22 at 11:03
1

Yes. I've been using it and its still solid. If there are no alternatives, its probably safe to use with older jquery. If you are latest and greatest jquery though, all bets are off ;) – Timothy C. Quinn Aug 09 '22 at 18:59

score 0 · Answer 4 · 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 5 · 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 6 · 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

17,147
12
117
144

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

33
2
8

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

Related