jQuery autocompletar en el fondo del cuadro de texto de entrada

Question

Tengo un script de autocompletar jQuery text box que usa un script PHP para consultar una base de datos MySQL. Actualmente, se muestra un resultado debajo del cuadro de texto, pero quiero que aparezca como si estuviera desvanecido en el cuadro de texto. ¿Cómo puedo hacer algo como esto? Un ejemplo de esto es en el cuadro de búsqueda de Google Instant.

Mi código de la página web actual es:

<script type='text/javascript'> 
function lookup(a) 
{ 
    if(a.length==0) 
    { 
     $("#suggestions").hide(); 
    } 
    else 
    { 
     $.post("suggest.php", { query: ""+a+"" }, function(b) 
     { 
      $("#suggestions").html(b).show(); 
     }); 
    } 
} 
</script> 

<input type='text' id='query' onkeyup='lookup(this.value);'> 
<div id='suggestions'></div> 

Y mi código PHP es:

<?php 
$database = new mysqli('localhost', 'username', 'password', 'database'); 

if(isset($_POST['query'])) 
{ 
    $query = $database->real_escape_string($_POST['query']); 

    if(strlen($query) > 0) 
    { 
     $suggestions = $database->query("SELECT name, value FROM search WHERE name LIKE '%" . $query . "%' ORDER BY value DESC LIMIT 1"); 

     if($suggestions) 
     { 
      while($result = $suggestions->fetch_object()) 
      { 
       echo '' . $result->name. ''; 
      } 
     } 
    } 
} 
?> 

Answer 1

Parece que Google usa 2 entradas, una con texto gris y otra con texto negro. Luego se superponen para que la entrada de texto gris esté en la parte inferior y la entrada de texto negra esté en la parte superior (se ve un mayor índice z).

La entrada gris contiene el texto completo más la sugerencia y la entrada negra solo muestra lo que escribió. Espero que esto pueda ayudarte a descubrir el código. Aquí es html de Google:

<div style="position:relative;zoom:1"> 
    <div style="position:relative;background:transparent"> 
    <input type="text" maxlength="2048" id="grey" disabled="disabled" autocomplete="off" class="lst"> 
    <div id="misspell" class="lst"></div> 
    </div> 
    <div> 
    <div class="lst" style="position: absolute; top: -900px; left: -9000px; max-width: 3000px; overflow: hidden; width: auto;"></div> 
    <input type="text" maxlength="2048" name="q" class="lst" autocomplete="off" size="41" title="Search" value=""> 
    <span id="tsf-oq" style="display:none"></span> 
    </div> 
</div> 

EDIT: aquí es una versión muy simplificada de un poco de HTML y CSS que potencialmente podrían utilizar http://jsfiddle.net/JRxnR/

#grey 
{ 
    color: #CCC; 
    background-color: transparent; 
    top: 0px; 
    left: 0px; 
    position:absolute; 
} 
#black 
{ 
    color: #000; 
    background-color: transparent; 
    z-index: 999; 
    top: 0px; 
    left: 0px; 
    position:absolute; 
} 

<input id="grey" type="text" value="test auto complete" /> 
<input id="black" type="text" value="test" /> 

Answer 2

yo todavía no estoy seguro de dónde exactamente desea que el efecto si es el cuadro de texto a continuación, en keyup evento cambie la propiedad de color de texto anterior a un color oscuro, es decir,

$ ('# query'). css ('color', 'gray');

Esto cambiará el color del texto a gris. O puede intentar cambiar la opacidad también.

estilo de Identificación del

#gray

utilizado por Google.

#grey { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border-color: transparent; 
    color: silver; 
    overflow: hidden; 
    position: absolute; 
    z-index: 1; 
} 

por lo que en primer paso que mostrar el texto autosuggested utilizando z-índice y en el paso siguiente se muestra el texto que el usuario typeded en y que le dará el mismo efecto de Google.