AJAX returns multiple values

AJAX returns multiple values

I have done a autocomplete textbox code for "supplier name". The code is working fine. But what I want is when I select a supplier name, the corresponding supplier id should be displayed in another hidden textbox.

My sample data-entry screen code is as follows

<HTML>

<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);
                }
            });
        }
    } // lookup

    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 your county:
                <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 which reads data from DB and returns value is as follows

<?php

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

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

      
        if(isset($_POST['queryString'])) {


          

            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!';
            }

?>