Intereting Posts

Как искать в опциях select tag html без плагина

Я сделал select tag с html, который содержит все имена стран, и я хочу искать их значения с помощью панели поиска без каких-либо плагинов или надстройки, что возможно?

Ответ

Да, вы можете, во-первых, увидеть это в действии в этой демонстрации , если вам нравится то, что вы видите, вот как это сделать:

HTML

  

Это довольно прямолинейно, вход для поиска и выбор с несколькими параметрами.

JavaScript

 searchBox = document.querySelector("#searchBox"); countries = document.querySelector("#countries"); var when = "keyup"; //You can change this to keydown, keypress or change searchBox.addEventListener("keyup", function (e) { var text = e.target.value; var options = countries.options; for (var i = 0; i < options.length; i++) { var option = options[i]; var optionText = option.text; var lowerOptionText = optionText.toLowerCase(); var lowerText = text.toLowerCase(); var regex = new RegExp("^" + text, "i"); var match = optionText.match(regex); var contains = lowerOptionText.indexOf(lowerText) != -1; if (match || contains) { option.selected = true; return; } searchBox.selectedIndex = 0; } }); 

объяснение

Во-первых, переменные:

  • searchBox : ссылка на HTMLElement поиска HTMLElement .
  • страны : ссылка на выбор HTMLElement .
  • когда : тип события, я использовал «keyup», и это означает, что select будет обновляться, когда вы нажимаете и поднимаете ключ в searchBox.
  • text, lowerText : значение searchBox (другими словами, текст ввода). Второй - первый, но нижний - для проверки чувствительности к регистру.
  • options : objects опций выбора.
  • optionText, lowerOptionText : текст object опций (ej. «Argentina»), а другой - нижняя версия для проверки чувствительности к регистру (ej. «argentina»)
  • regex : это RegExp Object , регулярное выражение, в основном то, что он делает, это тестирование (нечувствительное к регистру, из-за «i» во втором параметре), чтобы какая-то строка начиналась с некоторого значения, в этом случае значение было бы текст ввода.
  • match : он выполняет RegExp Object снова в тексте опции, это означает, что он будет проверять, является ли введенный текст таким же, как начало текста опции.
  • содержит : проверяет, содержит ли текст опции введенный текст.

Мало того, этого было много, поэтому зачем нам 2 теста? Поскольку есть две возможности для выбора с помощью searchBox, один из них заключается в том, что когда вы начинаете вводить «Unit ..», он должен совпадать с «Соединенными Штатами Америки» (regexp), а другой - просто ввести «америка», и он должен также соответствуют «Соединенным Штатам Америки» (содержит)

Таким образом, он проверяет оба теста, и если один из них верен, он выберет эту опцию. (Он также вернется так, что он не продолжит выполнение кода)

По умолчанию, если ни один тест не является истинным, он выберет первый элемент выбора.

Надеюсь, это поможет 🙂

Если вы не должны использовать плагин или сторонний скрипт, вы можете создать массив для заполнения параметров и поиска через массив, используя inarray http://api.jquery.com/jquery.inarray/, после чего вам понадобится метод для выбора результата и использования значения iterator для привязки его к соответствующему выбору.

Также есть это сообщение: найдите варианты выбора, найдите значение, добавьте его и напишите его html-текст на div

 Thank you @undefined In your code instead of making it selected i want to disabled it like display none. But display: none not working in IE11 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); } } }