可搜索的选择选项

时间:2015-06-30 08:28:38

标签: javascript jquery html select drop-down-menu

是否有选择选项/自动完成/可搜索?不幸的是我无法改变形式。所以我无法将选项更改为文本字段。但我能够访问css和javascript ..

以下是选择选项。

<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>

是否有任何javascript / jquery和css可以将其转换为serchable。

6 个答案:

答案 0 :(得分:5)

您可以考虑使用名为Select2的jQuery插件。您无法自行关闭<select>代码!你可以这样使用它:

&#13;
&#13;
$(function () {
  $("select").select2();
});
&#13;
@import url(https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css);
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以使用javascript包含其他脚本,如下所述:

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);
}

然后您可以使用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();
});

您还需要在css中包含selectize.css中的规则(或者您可以在Javascript中使用类似的includeCss函数创建链接元素)

https://jsfiddle.net/qpyhjydp/

请注意,在小提琴中我修复了自动关闭<select />(不允许)

答案 2 :(得分:0)

显示:没有人将无法使用IE11

我在选择选项中遇到了同样的搜索问题。

我所做的是禁用未匹配的选项并隐藏它们。

在此之后,我对选项进行了排序,以便仅显示已启用的选项。

我写的代码粘贴在下面 - 请尝试理解我希望它能运作的逻辑

禁用选项使用:

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

并再次启用它:

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

按禁用选项排序:

$("#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);
        }
    }
}

答案 3 :(得分:0)

全选项可搜索选择框

它还支持诸如ArrowDown ArrowUpEnter键之类的控制按钮键盘

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

答案 4 :(得分:0)

好的,我知道您不能将选择更改为其他任何内容,但那些正在搜索类似内容的人可以将 select 更改为 datalist,这很简单:

<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>  

答案 5 :(得分:0)

查看Chosen

我尝试了 select2selectize,但都不适合我。我正在使用 jQuery 3.6。 Chosen 第一次尝试成功。