在文本框下方顯示所選的多個值

Question

我正在嘗試顯示文本框的選定值，並在文本框下方顯示選定的值。

下面的文本框可以接受多個值，可以通過單擊值上的x符號將其刪除。 就像我們在發送消息時在Facebook中添加收件人的方式一樣。

一旦用戶開始在文本框中輸入內容，就會有建議可供選擇。

這樣，將值添加到文本框中。

現在，我想在文本框下方的div中顯示所選的多個值。 通過我編寫的JavaScript代碼，它僅顯示一個值。 但是我想顯示可以選擇的多個值，一旦將它們從文本框中刪除，這些值應該消失。 請糾正我在哪里出錯。

function takeVal(val)
        {
    var str='';
    <?
        $query = "select * from product";
        $sql = mysql_query($query);
        while($rs = mysql_fetch_object($sql))
        {
    ?>  
        if('<?php echo $rs->id;?>' == val)
        {

        //str += '<?php echo $rs->name;?>';
            document.getElementById('selectedResult').innerHTML = "The selected number is - " + "<?php echo $rs->name;?>";
        }

    <?
        }
    ?>

        }

的HTML

 <input type="text" id="interestedin" name="" class="box2 validate[required]"OnChange="takeVal(this.value);"/>
<div id='selectedResult'></div>

Answer 1

$ rs-> id是一個數組，使用任何for或foreach語句循環遍歷它。

Answer 2

聽起來這是實施自動完成功能（無違規）的一種非常粗糙的方法。 您是否考慮過為眾多JS框架之一使用插件？ 例如，默認情況下，jQuery UI提供了一個相當強大的自動完成插件： jQuery UI AutoComplete 。

使用它，您的問題將很容易解決：

<script type="text/javascript">
    $(function() {
        var products = [
            <?php // PHP begins here
                $query = "select * from product";
                $sql = mysql_query($query);
                while($rs = mysql_fetch_object($sql)) {
                    echo '"', $rs->name, '",';
                } // PHP ends here
            ?>
        ];
        $( "#interestedin" ).autocomplete({
            source: products,
            select: function(event, ui) {
                $('#selectedResult').text(ui.item.value);
            }
        });
    });
</script>
<input type="text" id="interestedin" class="box2 validate[required]" />
<div id="selectedResult"></div>