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

问题描述：

我想显示文本框的选定值并在文本框下方显示选定的值。在文本框下方显示选定的多个值

下面的文本框可以接受多个值，可以通过单击值上的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>

因为我得到的值是唯一的ID。我写了查询，采取相应的名称 –

你有没有尝试过任何答案吗？如果是这样的话：他们回答你的问题/解决你的问题？ – PPvG

答

这听起来像是一种非常粗糙的方式来实现自动完成（没有冒犯）。你有没有考虑过使用一个插件为其中的一个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>

下面是一个工作示例：http://jsfiddle.net/Cnu9M/ – PPvG

对不起PPvG。我目前无法尝试，因为我在工作场所塞满了其他作品。我会在今晚尝试，并尽快更新结果。非常感谢你的及时回应和帮助。对此，我真的非常感激。 –

答

的$ RS-> ID是一个数组，使用任何一个通过它或foreach语句循环。

你能告诉我上面的代码究竟该怎么做？ –

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

相关推荐