Combinación de entrada y selección en un campo de entrada visible

Soy nuevo en el diseño de elementos html (por ejemplo, la entrada & seleccione en este caso), y estoy buscando implementar un elemento de entrada/selección visualmente combinado. En esencia, la entrada y la selección todavía estarían completamente separadas como elementos de formulario, pero en función de la clase y css me gustaría insertar el contenido del menú de selección en el lado derecho del campo de entrada. En este momento no soy photoshoper, por lo que aquí es una representación de lo que podría ser:Combinación de entrada y selección en un campo de entrada visible

------------------------------------------------ 
|        Select text [v] | 
------------------------------------------------

Como se puede ver la parte de la mano izquierda de la entrada es donde debe escribir la cadena para el elemento de entrada y el El menú desplegable de selección se inserta en el borde del elemento de entrada (se supone que [v] es un botón de flecha hacia abajo para soltar la lista). Se agradece cualquier enlace a cómo mirar fijamente el estilo algo así o sugerencias.

Fuente

2011-11-28 somecallmemike

Así que, básicamente, un cuadro de texto se puede escribir en y obtener una lista de resultados con posibilidades de un menú desplegable? –

si es lo que está describiendo marc b es posible que desee utilizar un datalist – albert

@Marc, realmente no. Quiero tener una entrada y un menú desplegable. El menú desplegable sería términos de búsqueda como "clientes, contactos, números de teléfono", y el texto de entrada se relacionaría con cualquier término de búsqueda que seleccione. Podría simplemente poner una entrada en la pantalla, luego un desplegable al lado y lograr lo mismo, pero quiero insertar el menú de selección en el borde de selección porque creo que se vería muy resbaladizo. – somecallmemike

¿entonces esto?

http://jqueryui.com/demos/autocomplete/#combobox

Fuente

2011-11-28 21:42:30 mccow002

Algo como esto debería lograr lo que desea.

http://jsfiddle.net/rhoenig/xFQMf/

Fuente

2011-11-28 21:44:36 Robert

Esto no parece funcionar en mi Firefox. – Qqwy

@Qqwy si hace clic en el enlace, ¿verá la sección de resultados con el texto/cuadro movido a la derecha? De ser así, puedes editar la pregunta para mostrar cómo se ve tu archivo. – Robert

No veo el seleccionado en absoluto. Veo la etiqueta span, y un cuadro de entrada. No hay selección. – Qqwy

El siguiente ejemplo es muy simple. Muestra lo principal que le gustaría hacer: dado que los elementos del formulario se pueden diseñar con CSS como todo lo demás, es bastante sencillo. Este ejemplo todavía tiene algunos problemas de estilo con navegadores que no son Firefox, lo mejoraré un poco.

<html> 
<head> 
    <style> 
     select#selectoption { 
      border-left:none; 
      padding:none; 
     } 

     input#datahere { 
      position:relative; 
      border-right:none; 
      padding:none; 
     } 
     </style> 
    </head> 
<body> 
    The form below is a simple example. 
<form name ="explanation"action="test" method="post"> 
<input type="text" id="datahere" /> 
<select id="selectoption" /><option>test</option><option>test2</option></select> 

</form> 


</body> 
</html>

EDIT: Un ejemplo en línea de lo que quiere se puede ver aquí: http://jsfiddle.net/xFQMf/3/

Fuente

2011-11-28 21:53:28 Qqwy

Hay una biblioteca que puede probar: https://github.com/eredacokmerke/dm-i

Fuente

2014-12-11 12:53:24 user4757345