Responder

Sí, puedes, primero, verlo en acción en esta demostración , si te gusta lo que ves, esta es la forma de hacerlo:

HTML

  Argentina United States of America Somalia  

Es bastante sencillo, una entrada de búsqueda y una selección con algunas opciones.

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

Explicación

Primero, las variables:

• searchBox : enlace a la entrada de búsqueda HTMLElement .
• países : enlace a la selección HTMLElement .
• cuando : tipo de evento, utilicé "keyup" y eso significa que la selección se actualizará cuando presione y levante una tecla en el cuadro de búsqueda.
• text, lowerText : El valor de searchBox (en otras palabras, el texto de entrada). El segundo es igual al primero pero en minúsculas para las pruebas insensibles a mayúsculas y minúsculas.
• opciones : los objects opciones de selección.
• optionText, lowerOptionText : el texto del object opción (ej. "Argentina") y el otro es la versión más baja para pruebas que no distinguen entre mayúsculas y minúsculas (ej. "argentina")
• regex : Es un RegExp Object , una expresión regular, básicamente lo que hace es probar (no distingue entre mayúsculas y minúsculas, debido a la 'i' en el segundo parámetro) si alguna cadena comienza con algún valor, en este caso, el valor sería el texto de entrada.
• coincidencia : Ejecuta el RegExp Object contra el texto de la opción, lo que significa que probará si el texto ingresado es el mismo que el comienzo del texto de la opción.
• contiene : Comprueba si el texto de la opción contiene el texto ingresado.

Pocos, eso fue mucho, entonces, ¿por qué necesitamos 2 pruebas? Debido a que hay dos posibilidades para la selección con searchBox, una es que cuando empiezas a escribir "Unidad ..." debe coincidir con "Estados Unidos de América" ​​(regexp), y la otra es que simplemente escribes "América" ​​y debería también coincide con "Estados Unidos de América" ​​(contiene)

Por lo tanto, verifica ambas pruebas, y si alguna de ellas es verdadera, seleccionará esa opción. (También regresará para que no continúe ejecutando el código)

Por defecto, si ninguna prueba es verdadera, seleccionará el primer elemento de la selección.

Espero que ayude 🙂

Si no debe usar un plugin o script de terceros, podría crear una matriz para llenar las opciones y la búsqueda a través de la matriz usando inarray http://api.jquery.com/jquery.inarray/ , entonces necesitaría tener una método para seleccionar el resultado y usar el valor del iterador para vincularlo a la opción de selección correspondiente.

También hay esta publicación: Busque las opciones de una selección, encuentre el valor, agregue seleccionado a él y escriba su texto html en un 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); } } }