¿Cómo implementar un campo de entrada similar a Google Suggest?

Question

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 en otra cadena de entrada con un estilo diferente?

¿Es esto un <span> sobre la entrada con el valor mayor 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, este es un <span> (u otra <div>) sentado sobre la entrada a continuación, ¿cómo saben que la primera parte de la cadena (stack) termina y dónde colocar (ancho) la palabra overflow (en este caso)

¿Alguien sabe cómo lograr este efecto?

Answer 1

Después de inspeccionar el código, he encontrado que es un campo input en la parte superior de otro campo input. El campo input autocompletado está configurado como deshabilitado, dándole el color gris.

Usando este método no tienen que calcular dónde termina la cadena como lo dijo anteriormente, simplemente coloque el campo real input sobre el campo autocomlete input.

Ejemplo:

actualización

He aquí una demostración rápida http://jsfiddle.net/dargf/
Por supuesto, habría que añadir en su propio Javascript autocompletar, pero eso 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') 
}); 

Answer 2

Prueba esto: jQuery autocomplete in background of input text box

se ve como dos entradas con el que está detrás de gris y el que está delante transparente.

Answer 3

mirada a continuación:

http://net.tutsplus.com/tutorials/javascript-ajax/adding-a-jquery-auto-complete-to-your-google-custom-search-engine/

o

http://www.programmers.org/index.php/2009/12/jquery-google-suggest-jquerygsuggestjs/

Esto ayudará.

Answer 4

La entrada de búsqueda tiene ba transparente ckground, 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 de color negro).

Ambos están absolutamente posicionados en la misma posición.