how to draw a box over selected option with close button
<p>here is the code.........</p>

<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;search&lt;/title&gt;

&lt;script type="text/javascript" src="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("rpc.php", {queryString: ""+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;
                Type the Product name:
                &lt;br /&gt;
                &lt;input type="text" size="30" value="" 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="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /&gt;
                &lt;div class="suggestionList" id="autoSuggestionsList"&gt;
                    &amp;nbsp;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/form&gt;
    &lt;/div&gt;

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

<p>on running this code. a textbox displays. when we type the suggestion displays and we can select the correct suggestion . but when we click the suggestion the suggestion is loaded as plain text. eg. when we type "b" in text box it displays "browsers and so on". when we click browser it updates in textbox as plain text. i need that to be in a box... as in stackoverflow we "tag" option like c it appears like a box . i need to do like that ?? how to implement that???</p>
