javascript - example - ¿Cómo implementar un campo de entrada similar a Google Suggest?
input address google maps (4)
Después de inspeccionar el código, descubrí que es un campo de input en la parte superior de otro campo de input . El campo de input autocompletado está desactivado, dándole el color gris.
Con este método no es necesario que calculen dónde termina la cadena como lo dijo anteriormente, simplemente coloque el campo de input real sobre el campo de input autocompresión.
Ejemplo:
Actualizar
Aquí hay una demostración rápida http://jsfiddle.net/dargf/
Por supuesto, debería agregar su propio JavaScript autocompletado, pero ese es un ejemplo del estilo.
HTML
<div>
<input id="main" type="text" />
<input id="autocomplete" type="text" disabled="disabled" />
</div>
CSS
div
{
position: relative;
}
#main{
position: absolute;
top: 0;
left: 0;
z-index: 11;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 10;
}
Javascsript
$(''#main'').keyup(function(e){
console.log(e);
$(''#autocomplete'').val($(this).val() + ''asdf'')
});
Actualmente estoy trabajando en mi propio script de autocompletar / sugerir y quiero lograr el mismo efecto que Google tiene en su sitio principal.
Cuando el usuario comienza a escribir (por ejemplo, stack ), aparecen 4 sugerencias en una lista desplegable a continuación, pero ... al mismo tiempo, la que está en la parte superior muestra "en" el campo de entrada en color gris:
¿Cómo sería posible poner otra cadena en la entrada con un estilo diferente?
¿Es esto una entrada <span> over con el mayor valor de z-index ? Cuando hago clic en la parte gris de la cadena, el campo de entrada no se enfoca, así que creo que algo tiene que pasar.
Si de hecho esto es un <span> (u otro <div> ) sentado sobre la entrada, ¿cómo saben dónde termina la primera parte de la cadena ( stack ) y dónde colocar (ancho) la palabra de overflow (en este caso )
¿Alguien sabe cómo lograr este efecto?
La entrada de búsqueda tiene fondo transparente, y hay otro campo de entrada deshabilitado detrás (con índice z más bajo), con el valor de sugerencia, por lo que en el campo desactivado solo se ve la parte gris (hay texto completo pero no se puede ver como las letras en la entrada principal tienen color negro).
Ambos están absolutamente posicionados en la misma posición.
Prueba esto: jQuery autocompletar en el fondo del cuadro de texto de entrada
Parece dos entradas con la que está detrás en gris y la que está en el frente transparente.