2015-06-30 122 views
-2

是否有选择选项作为可选/自动完成/可搜索?不幸的是我不能改变形式。所以我无法将选择选项更改为文本字段。但我能够访问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。

+0

嗨@ user2748728,你能考虑接受给定的一个答案,或给予反馈,如果他们都不是有帮助的? –

+0

我用Javascript包含外部脚本的方法更新了我的答案。 –

回答

0

您可以考虑使用jQuery插件叫做Select2。你不能自动关闭<select>标签!你可以用这种方式:

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

+0

我不能使用

0

您可以使用JavaScript来包含其它的scripts如这里解释:

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/

注意我固定autoclosing <select />(不允许)

+0

你的解决方案没有工作.. – user2748728

+0

添加一些细节?为什么它不起作用?你得到什么错误?如果你不显示你的努力,你将无法获得这个网站的很多帮助。 –

0
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 disabled the options use 


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

        and to again enable it use 

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

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