validar validacion una texto tablas tabla obtener formularios formulario enviar ejemplos datos con antes agregar javascript html html-select

javascript - validacion - Creación de un cuadro de selección con una opción de búsqueda



validar formulario javascript antes de enviar (5)

Este código simple me funcionó.

$(document).ready(function(){ $("input").click(function(){ $(this).next().show(); $(this).next().hide(); }); });

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <input list="brow"> <datalist id="brow"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </body> </html>

Estoy tratando de replicar lo que puedes ver aquí en esta imagen.

Quiero poder escribir el campo de texto sobre el cuadro o simplemente hacer clic en la opción directamente.

¿Cuál sería la mejor manera de hacerlo? ¿Hay algo relacionado con bootstrap que ya existe?


Esto funcionará para la mayoría de nosotros. La respuesta dada por Hemanth Palle es la forma más fácil de hacerlo, funcionó para mí y el código JS no fue necesario. El único problema que he encontrado es que, según W3Schools, la etiqueta datalist no se admite en Internet Explorer 9 y versiones anteriores, o en Safari.

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </body> </html>


Esto se hará mediante el uso de jquery. Aquí está el código

<select class="chosen" style="width:500px;"> <option>Html</option> <option>Css</option> <option>Css3</option> <option>Php</option> <option>MySql</option> <option>Javascript</option> <option>Jquery</option> <option>Html5</option> <option>Wordpress</option> <option>Joomla</option> <option>Druple</option> <option>Json</option> <option>Angular Js</option> </select> </div> <script type="text/javascript"> $(".chosen").chosen(); </script>

Ejemplo de trabajo aquí ...