0
147
VistasCómo buscar dentro de la etiqueta de entrada
Quiero buscar elementos dentro de un cuadro de selección. lo que necesito es escribir las palabras clave para buscar dentro de la etiqueta de entrada y el elemento que coincide con mi búsqueda se selecciona sobre la marcha.
Sería algo como esto:
Este es mi código:
var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC', '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF']; var select = document.getElementById("color"); for(index in arrayOfColors) { select.options[select.options.length] = new Option(arrayOfColors[index], index); } <div class="mb-3"> <label class="form-label">Color</label> <select class="form-select" id="color"> <option> Type the search here </option> </select> </div>Algunas ideas ? gracias !
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Podemos buscar la opción por palabras clave en input usando jQuery UI .
Fragmento de código :
$( function() { var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC', '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF']; $( "#color" ).autocomplete({ source: arrayOfColors }); } ); <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="mb-3"> <label class="form-label">Color</label> <input id="color" placeholder="Type the search here"> </div>
·
Juan Pablo Isaza
Denunciar
0
ejemplo de mi comentario usando un elemento de formulario de lista de datos:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
El elemento HTML
<datalist>contiene un conjunto de elementos<option>que representan las opciones permitidas o recomendadas disponibles para elegir dentro de otros controles.
Manifestación:
var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC', '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF' ]; let datalist = document.querySelector("#color"); for (i = 0; i < arrayOfColors.length; i++) { let opt = document.createElement("option"); opt.setAttribute("value", arrayOfColors[i]); datalist.appendChild(opt) } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="mb-3"> <label class="form-label" for="iptcolor" >Color</label> <input class="form-select" list="color" placeholder="type your search here" id="iptcolor" /> <datalist id="color"></datalist> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta