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-＆gt; 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>

在文本框下方显示选定的多个值

2 个答案: