My auto suggestion is not working properly?
<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Ajax Auto Suggest&lt;/title&gt;
 &lt;script type="text/javascript" src="{{ MEDIA_URL }}scripts/jquery-1.2.1.pack.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
    function lookup(inputString) {
        if(inputString.length == 0) {
            $('#suggestions').hide();
        } else {
            $.post("/search/", {q: ""+inputString+""}, function(data){
                if(data.length &gt;0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    }
    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
 &lt;/script&gt;
&lt;style type="text/css"&gt;
    body {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }
    h3 {
        margin: 0px;
        padding: 0px;   
    }
    .suggestionsBox {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }
    .suggestionList {
        margin: 0px;
        padding: 0px;
    }
    .suggestionList li {
        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover {
        background-color: #659CD8;
    }
&lt;/style&gt;
&lt;/head&gt;
 &lt;body&gt;   
    &lt;div&gt;
        &lt;form&gt;
            &lt;div&gt;
                &lt;br /&gt;
                &lt;input type="text" size="30" value="" autocomplete="off" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /&gt;
            &lt;/div&gt;
            &lt;div class="suggestionsBox" id="suggestions" style="display: none;"&gt;
                    &lt;img src="{{ MEDIA_URL }}images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /&gt;
                &lt;div class="suggestionList" id="autoSuggestionsList"&gt;
                    {% for value in result %}
                    &lt;li onclick="fill({{ value }});"&gt;{{ value }}&lt;/li&gt;
                        {% endfor %}
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/form&gt;
    &lt;/div&gt;  

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I tried an example from <code>http://www.jeffadams.co.uk/2009/08/31/auto-suggest-with-php-jquery/</code> But it is not working for me. Where i am doing wrong? Can any one suggest?</p>
