jQuery autocomplete in background of input text box

Question

I have a jQuery text box autocomplete script which uses a PHP script to query a MySQL database. Currently, a result is displayed under the text box however I want it to appear as if it is faded out in the text box. How can I do something like this? An example of this is on the Google Instant search box.

My current web page code is:

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

And my PHP code is:

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

I've just edited this code to make it nicer to read. I'd recommend spacing out your code more so it's not so hard to debug in the future. — Bojangles
– Bojangles, Commented Jun 13, 2011 at 21:25

fehays · Accepted Answer · 2011-06-13 21:18:07Z

It looks like Google uses 2 inputs, one with grey text, and another with black text. Then they are overlayed so that the grey text input is on the bottom and the black text input is on top (greater z-index it looks like).

They grey input contains the full text plus the suggestion and the black input only displays what you typed. Hopefully this can help you figure out the code. Here's Google's 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: Here's a very simplified version of some html and css you could potentially use 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" />

Khurram Ijaz · Accepted Answer · 2011-06-13 21:09:37Z

0

i am still not sure where exactly you want the effect if its the text box then on keyup event change the previous text color property to a dim color i.e.

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

this will change the color of the text to gray. Or you can try changing the opacity of it as well.

style of id

#gray

used by google.

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

so in first step you display the autosuggested text using z-index and in the next step you display the text which user typeded in and that will give you the same effect of google.

edited Jun 13, 2011 at 21:09

answered Jun 13, 2011 at 20:50

Khurram Ijaz

1,8645 gold badges24 silver badges43 bronze badges

2 Comments

Khurram Ijaz Over a year ago

in the case you want the auto suggested text to appear in gray color and the text you typed in black color then its interesting for me too because you cannot select the autosuggested text it appears as if it is added as an image or background to the textfield instead of type text.

Khurram Ijaz Over a year ago

yes i have confirmed it using firebug they using z-index property for the autosuggested text to appear in the background. smart effect

Collectives™ on Stack Overflow

jQuery autocomplete in background of input text box

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related