Facebook/Youtube 喜欢多个项目选择答案

【问题标题】：Facebook/Youtube Like Multiple Items SelectFacebook/Youtube 喜欢多个项目选择
【发布时间】：2010-05-10 15:31:50
【问题描述】：

在我们继续之前：它不能是预定义的列表。

我需要它是这样的：http://loopj.com/tokeninput/demo.html ... 一个 jQuery 插件，允许用户输入一串单词，按 Enter，然后将其变成一个文本块，从那里他们可以按 X摆脱它，或在输入区域输入更多关键词。我发现了很多这样做的东西，但都是从预定义的选择列表中提取信息。

【问题讨论】：

标签： jquery jquery-plugins

【解决方案1】：

给你：http://www.spookandpuff.com/examples/tagEntry.html

一般要点是...

允许用户在文本输入中键入任何内容
当他们按下回车时，检查标签是否是新的，如果是，则将值作为一个项目添加到列表中。
添加“删除”链接以允许从列表中删除标签。
允许标签列表最终发送回服务器。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Free Tag Entry</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      //The event handler for the input:
      $('#tagEntry').keypress(function(event){

        if (event.keyCode == '13') { //If Enter is pressed

          var newTagName = $(this).attr('value');

          //Clear the helper message:
          $('#tagEntryHelper').text('');

          //Check if the tag exists already:
          if (
            !$('#addedTags > li > .tagName').filter(function(){
              return $(this).text() == newTagName;
            }).length
          ) {
            //If not, add the value to the list of tags:
            $('#addedTags').prepend('<li><input type="checkbox" name="tagName" value="' + newTagName + '" checked="checked"/><span class="tagName">' + newTagName + '</span> <a href="#" class="remove">Remove</a></li>');
          } else {
            //Tell the user they messed up:
            $('#tagEntryHelper').text('You already added that tag.');
          };

          //Clear the input ready for the next tag
          $(this).attr('value', '');

        }
      });

      //The event handler for removing tags via a 'remove' link/icon (live is used so it works on newly added tags):
      $('#addedTags .remove').live('click', function(){
        $(this).closest('li').remove();
        return false;
      });

      //An event handler for removing tags via unchecking a box
      $('#addedTags :checkbox').live('change', function(){
          if ($(this).not(':checked')) {
            $(this).closest('li').remove();
            return false;
          }
      })
    });
  </script>

</head>

<body>
  <input id="tagEntry" type="text"/> <span id="tagEntryHelper"></span>
  <ul id="addedTags">
  </ul>
</body>
</html>

这可行，虽然我使用了一些 jQuery 约定，使代码更易于阅读，但在性能方面可能不是最好的。除非您期望用户使用数千个标签，否则我不会担心 - 应该没问题。

我在标签列表中包含了一个复选框 - 假设您最终希望将列表的内容发布回服务器（可能作为表单的一部分）。如果您不希望它们可见，可以使用 CSS 隐藏这些复选框，或者，如果您愿意，可以将它们用作删除机制。无论哪种方式，因为所有复选框的名称都相同，所以您的表单将返回一个逗号分隔的标签列表（这在服务器端应该很容易处理）。

看看演示 - 这就是你想要的吗？

【讨论】：

谢谢比杰明。我只是在寻找这个。 stackoverflow.com/questions/3899141/…。现在我想我只需要研究如何识别输入的值与列表中的任何项目都不匹配。但在此之前，我无法获取输入文本本身。

【解决方案2】：

您链接到的站点，它将请求发送到返回查询结果的 PHP 页面。是什么阻止你做同样的事情？然后，您将请求发送到的 PHP/ASP/Whatever 页面可以执行您需要执行的任何操作来获取列表（从数据库、从外部站点 - 缓存 - 或其他），然后返回结果。

【讨论】：

我不想拉列表。我希望它只返回他们正在输入的内容，当他们按下 enter 或 tab 时，它只会使其成为一个块元素。有点像 YouTube 在您标记视频时所做的事情。我也不希望它提供建议，或者我只会编写一个 PHP 脚本来返回他们输入的内容。
哦，对了。我没有从你的问题中明白这一点。在这种情况下，做你所做的（正如你在其他答案中所说）并修改现有的插件，删除自动完成的东西，然后让它输出输入的内容。

【解决方案3】：

好吧，据我了解，您有执行此操作的代码，但您不需要预定义列表。

最简单的方法是将列表呈现为服务器响应的一部分。这样，您的客户端代码可以引用从服务器呈现的此列表。这样做的缺点是它是静态的并且不是很灵活。但是，这是最简单的，因为每次重新加载页面时都可以呈现列表。

也许更好的方法是为此列表发出网络服务请求，并在客户端上定义它。通过这种方式，您可以动态提取多种类型的内容，而无需重新加载页面。您将对项目发出 Ajax 请求，然后根据 Ajax 响应加载您的列表。

【讨论】：

【解决方案4】：

我的解决方案是使用 LoopJ 的令牌输入插件并稍微修改代码，以便它返回正在输入的内容。我很想看看是否有其他人有一个可以原生支持它的插件。

【讨论】：