html - horizontal - Menú desplegable/campo de texto en uno
menu desplegable vertical html (6)
Estoy trabajando en la construcción de un nuevo sitio, y necesito un menú desplegable para seleccionar la cantidad de algo en mi sitio. Pero al mismo tiempo necesito esta lista desplegable para aceptar el texto. Entonces, si el cliente desea elegir de la lista desplegable, entonces puede, también si el cliente desea ingresar la cantidad por texto, entonces también puede hacerlo. Como pueden ver, quiero hacerlo doble.
Por ejemplo: supongamos que hay un menú desplegable de amount , y sus elementos son (1,2,3);
Supongamos ahora que el cliente necesita que la cantidad sea 5, este es su derecho, no existe en la lista desplegable, por lo que ahora el cliente debe ingresar la cantidad textualmente. Entonces, para cualquier entrada, el cliente debe elegir de la lista desplegable o ingresar el monto textualmente.
Después de la descripción de mi problema y el ejemplo simple que te he presentado, esta es mi pregunta:
¿Hay un código HTML para hacer un menú desplegable y un campo de texto en uno, como dual, no separado?
Opción 1
Incluye el script de dhtmlgoodies e inicializa así:
<input type="text" name="myText" value="Norway"
selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico">
createEditableSelect(document.forms[0].myText);
opcion 2
Aquí hay una solución personalizada que combina un elemento <select> y un elemento <input> , los estiliza y alterna de un lado a otro a través de JavaScript
<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
<select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
onchange="document.getElementById(''displayValue'').value=this.options[this.selectedIndex].text; document.getElementById(''idValue'').value=this.options[this.selectedIndex].value;">
<option></option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<input type="text" name="displayValue" id="displayValue"
placeholder="add/select a value" onfocus="this.select()"
style="position:absolute;top:0px;left:0px;width:183px;width:180px/9;#width:180px;height:23px; height:21px/9;#height:18px;border:1px solid #556;" >
<input name="idValue" id="idValue" type="hidden">
</div>
Encontré esta pregunta y discusión muy útiles y quería mostrar la solución con la que terminé. Se basa en la respuesta dada por @DevangRathod, pero utilicé jQuery y le hice algunos retoques, así que quería mostrar una muestra totalmente comentada para ayudar a cualquier persona que trabaje en algo similar. Originalmente había estado usando el elemento de lista de datos HTML5, pero no estaba satisfecho con esa solución, ya que elimina las opciones de la lista desplegable que no coinciden con el texto escrito en el cuadro. En mi aplicación, quería que la lista completa siempre esté disponible.
Demostración completamente funcional aquí: https://jsfiddle.net/abru77mm/
HTML:
<!--
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style. Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
<select class="data-list-input" style="width:190px;">
<option value=""><Free Form Text></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<!-- Note that though the select/option allows for a different
display and internal value, there is no such distinction in the
text box, so for all the options (except the "none" option) the
value and content of the option should be identical. -->
</select>
<input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>
JS:
jQuery(function() {
//keep the focus on the input box so that the highlighting
//I''m using doesn''t give away the hidden select box to the user
$(''select.data-list-input'').focus(function() {
$(this).siblings(''input.data-list-input'').focus();
});
//when selecting from the select box, put the value in the input box
$(''select.data-list-input'').change(function() {
$(this).siblings(''input.data-list-input'').val($(this).val());
});
//When editing the input box, reset the select box setting to "free
//form input". This is important to do so that you can reselect the
//option you had selected if you want to.
$(''input.data-list-input'').change(function() {
$(this).siblings(''select.data-list-input'').val('''');
});
});
CSS:
div.data-list-input
{
position: relative;
height: 20px;
display: inline-flex;
padding: 5px 0 5px 0;
}
select.data-list-input
{
position: absolute;
top: 5px;
left: 0px;
height: 20px;
}
input.data-list-input
{
position: absolute;
top: 0px;
left: 0px;
height: 20px;
}
Cualquier comentario de mejora en mi implementación bienvenida. Espero que alguien encuentre esto útil.
Inspirado en el violín js por @ajdeguzman (hecho mi día), aquí está mi derivado nodo / React:
<div style={{position:"relative",width:"200px",height:"25px",border:0,
padding:0,margin:0}}>
<select style={{position:"absolute",top:"0px",left:"0px",
width:"200px",height:"25px",lineHeight:"20px",
margin:0,padding:0}} onChange={this.onMenuSelect}>
<option></option>
<option value="starttime">Filter by Start Time</option>
<option value="user" >Filter by User</option>
<option value="buildid" >Filter by Build Id</option>
<option value="invoker" >Filter by Invoker</option>
</select>
<input name="displayValue" id="displayValue"
style={{position:"absolute",top:"2px",left:"3px",width:"180px",
height:"21px",border:"1px solid #A9A9A9"}}
onfocus={this.select} type="text" onChange={this.onIdFilterChange}
onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp}
placeholder="Filter by Build ID"/>
</div>
Se ve como esto:
Me gusta la entrada de jQuery Token. En realidad, prefiero la interfaz de usuario a algunas de las otras opciones mencionadas anteriormente.
http://loopj.com/jquery-tokeninput/
También vea: http://railscasts.com/episodes/258-token-fields para una explicación
Me gustaría agregar una solución basada en autocompletar jQuery que hace el trabajo.
Paso 1: hacer que la lista sea de altura fija y desplazable
Obtenga el código de https://jqueryui.com/autocomplete/ Ejemplo "desplazable", estableciendo la altura máxima en la lista de resultados para que se comporte como un cuadro de selección.
Paso 2: abre la lista en foco:
Muestra la lista de autocompletar de jquery ui en el evento de foco
Paso 3: Establezca los caracteres mínimos en 0 para que se abra sin importar cuántos caracteres hay en la entrada
Resultado final:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Scrollable results</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn''t support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<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>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
// source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior
source: function (request, response) {
response( availableTags);
},
minLength: 0
}).focus(function(){
// $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening
$(this).data("uiAutocomplete").search('''');
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
Compruebe jsfiddle aquí:
Puedes hacerlo de forma nativa con HTML5 <datalist> :
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>