Question

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

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

Answer 1

在这里：http://www.spookandpuff.com/examples/tagEntry.html

一般要点是......

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

以下是代码：

<!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隐藏这些复选框，或者，如果您愿意，可以将它们用作删除机制。无论哪种方式，因为所有复选框都命名相同，您的表单将回发一个逗号分隔的标记列表（在服务器端应该很容易处理）。

看看演示 - 你想要的是什么？

Answer 2

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

Answer 3

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

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

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

Answer 4

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

Facebook / Youtube喜欢多个项目选择

4 个答案: