Autocomplete Textbox - Get multiple value

Autocomplete Textbox - Get multiple value

My PHP file returns "suppliername" which will be listed in the autocomplete textbox using JQuery. I just want to store the "supplierid" in the hidden textbox when I choose a suppliername from the list.

The code for dataentry screen follows :


<html>

<head>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">

    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    }

    function fill(thisValue) {
                $('#inputString').val(thisValue);
                                setTimeout("$('#suggestions').hide();", 200);
    }
</script>

<style type="text/css">
    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;
    }
</style>

</head>

<body>


    <div>
        <form>
            <div>
                Type supplier name :
                <br />
                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
                                <input type="hidden" size="30" value="" id="text1"  />
            </div>

            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                    &nbsp;
                </div>
            </div>
        </form>
    </div>

</body>
</html>





























































































The php code that return the value for text box is: (rpc.php)

<?php

  
        include("connect.php");
        $database="stockdata";

        mysql_select_db ($database, $link);
                $queryString = $_POST['queryString'];

               // Is there a posted query string?
        if(isset($_POST['queryString'])) {


            // Is the string length greater than 0?

            if(strlen($queryString) >0)
                        {
  
                                $sql = "SELECT suppname,suppid FROM supplier WHERE suppname LIKE '$queryString%'";
                               
                                $result=mysql_query($sql);
                    $num_rows = mysql_num_rows($result);
                                $row = mysql_fetch_row($result);
                                for ($i=0;$i < $num_rows ; $i++)
                 {
                       echo '<li onClick="fill(\''.$row['0'].'\');">'.$row['0'].'</li>';
                                      $row = mysql_fetch_row($result);
                            }
            }
                        }
                        else
                        {
            echo 'There should be no direct access to this script!';
            }

?>