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>
Select2 http://select2.github.io puede ser incluso mejor y más activo que Chosen.
Vea esta comparación: http://sitepoint.com/jquery-select-box-components-chosen-vs-select2
Fui a Select2 (hace unos meses) porque Chosen tenía un problema cuando usaba caracteres chinos a través de un IME http://github.com/harvesthq/chosen/issues/2663 .
prueba jQuery ui autocompletar. Para eso echa un vistazo a este enlace.