jQuery autocomplete en arrière-plan de la zone de texte d'entrée

J'ai un jQuery zone de texte de saisie semi-automatique de script qui utilise un script PHP pour interroger une base de données MySQL. Actuellement, un résultat s'affiche sous la zone de texte cependant je veux qu'il apparaisse comme si il est disparu dans la zone de texte. Comment puis-je faire quelque chose comme cela? Un exemple de ceci est sur la zone de recherche Instantanée Google.

Mon code de la page web est:

<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>

Et mon code PHP est:

<?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. '';
            }
        }
    }
}
?>

J'ai juste modifié ce code afin de le rendre plus agréable à lire. Je recommande d'espacer vos code plus il n'est pas si difficile à déboguer à l'avenir.

OriginalL'auteur Cosmo Posmo | 2011-06-13

Il ressemble à Google utilise 2 entrées, l'une avec texte en gris, et un autre avec du texte noir. Ensuite, ils sont superposés de sorte que le gris de la saisie de texte est en bas et le noir de saisie de texte est sur le dessus (plus de z-index, il ressemble).

Ils gris d'entrée contient le texte intégral, plus de la suggestion et le noir de saisie s'affiche uniquement ce que vous avez tapé. Espérons que cela peut vous aider à trouver le code. Voici Google html:

<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:
Voici une version très simplifiée de html et css, vous pouvez éventuellement utiliser
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" />

OriginalL'auteur fehays

0

je ne sais pas encore exactement où vous voulez que l'effet si ses la zone de texte, puis sur l'événement keyup modifier le texte précédent propriété de couleur pour un peu de couleur c'est à dire

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

cela va changer la couleur du texte en gris. Ou vous pouvez essayer de modifier l'opacité de celui-ci.

style de id

#gris

utilisé par google.
```
#grey {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: transparent;
    color: silver;
    overflow: hidden;
    position: absolute;
    z-index: 1;
}
```
donc dans la première étape vous permet d'afficher la autosuggested texte à l'aide de z-index et dans la prochaine étape vous permet d'afficher le texte de l'utilisateur qui typeded et qui vous donnera le même effet que de google.

dans le cas où vous souhaitez que l'auto a suggéré le texte s'affiche en gris de la couleur et le texte que vous avez tapé dans le noir la couleur, puis de son intéressant pour moi aussi, parce que vous ne pouvez pas sélectionner le autosuggested texte, il semble comme si elle est ajoutée comme une image ou d'arrière-plan de la zone de texte à la place du type de texte.
oui, j'ai confirmé à l'aide de firebug elles à l'aide de propriété z-index pour la autosuggested texte apparaissent en arrière-plan. smart effet

OriginalL'auteur Khurram Ijaz

Vous devez vous connecter pour publier un commentaire.