Come implementare un campo di input simile al suggerimento di Google?

Question

Attualmente sto lavorando al mio script di completamento automatico/suggerimento e voglio ottenere un effetto simile su Google nel loro sito principale.

Quando l'utente inizia a digitare (ad esempio stack), 4 suggerimenti vengono visualizzati in un elenco a discesa in basso ma ... anche, allo stesso tempo quello in alto mostra "in" il campo di input in grigio :

Come sarebbe possibile mettere in un'altra stringa di input con uno stile diverso?

È un valore <span> con il valore maggiore z-index? Quando clicco sulla parte grigia della stringa, il campo di input non ottiene il focus, quindi credo che qualcosa debba esserci sopra.

Se infatti si tratta di un <span> (o altro <div>) seduta sull'ingresso allora come sanno dove la prima parte della stringa (stack) termina e dove posizionare (larghezza) la parola overflow (in questo caso).

Qualcuno sa come ottenere questo effetto?

Answer 1

Dopo aver ispezionato il codice, ho scoperto che si tratta di un campo input sopra un altro campo input. Il campo input con completamento automatico è impostato su disattivato, assegnandogli il colore grigio.

Utilizzando questo metodo non è necessario calcolare dove finisce la stringa come si è detto sopra, posizionare assolutamente il campo effettivo input sul campo autocllet input.

Esempio:

Aggiornamento

Ecco un breve demo http://jsfiddle.net/dargf/
Naturalmente, si dovrà aggiungere nel proprio javascript completamento automatico, ma questo è un esempio dello stile .

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

Prova questo: jQuery autocomplete in background of input text box

Sembra due ingressi con quella dietro in grigio e quello davanti trasparente.

Answer 3

Guardate qui sotto:

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/

Vi aiuterà.

Answer 4

L'ingresso di ricerca ha ba trasparente ckground, e c'è un altro campo di input disabilitato dietro (con lo z-index più basso), con il valore del suggerimento, quindi in campo disabilitato si vede solo la parte grigia (c'è del testo completo ma non può essere visto come le lettere nell'ingresso principale ha colore nero).

Entrambi sono posizionati in modo assoluto nella stessa posizione.