Доступный для выбора вариант

-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, которые могут преобразовать его в качестве образца.

источник

2015-06-30 user2748728

Привет @ user2748728, могли бы вы рассмотреть вопрос о принятии одного из указанных ответов, или давая обратную связь, если ни один из них не был полезен? –

Я обновил свой ответ с помощью метода включения внешних скриптов с Javascript. –

Вы можете рассмотреть возможность использования плагина JQuery под названием Select2. Вы не может self-close a <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>

источник

2015-06-30 08:48:00

Я не могу использовать

Я думаю, что это то, что вы ищете:

https://jqueryui.com/autocomplete/#combobox

источник

2015-06-30 08:33:41 Rickert

Ссылка только ответы не приветствуются http://stackoverflow.com/help/how-to-answer –

Этот плагин JQuery также поможет вам, https://select2.github.io/

источник

2015-06-30 08:44:10 Gagan

Ссылка только ответы обескуражены http://stackoverflow.com/help/how-to-answer –

Вы можете использовать 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 (или вы можете создать ссылку элемент, используя подобную includeCss функцию Javascript)

https://jsfiddle.net/qpyhjydp/

Заметьте, что в скрипкой Я установил autoclosing <select /> (не допускается)

источник

2015-06-30 08:48:39

ваше решение не сработало. – user2748728

Добавить некоторые детали? Почему это не работает? Какие ошибки вы получаете? Вы не получите большую помощь на этом сайте, если не проявите своих усилий. –

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

источник

2016-12-05 11:20:49

Смежные вопросы