代码之家 › 专栏 › 技术社区 › bradenkeith

Facebook/YouTube喜欢多个项目选择

jquery-plugins jquery

bradenkeith · 技术社区 · 14 年前

在继续之前:它不能是预先定义的列表。

我需要这样的: http://loopj.com/tokeninput/demo.html …一个jquery插件,允许用户键入一个字符串,按Enter键,它使它成为一个文本块,从那里他们可以按X键删除它,或在输入区键入更多关键字。我发现了很多这样做的事情,但都是从预先定义的选项列表中提取信息。

4 回复 | 直到 14 年前

Ben Hull 14 年前

干得好: 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隐藏它们;如果愿意,也可以使用它们作为删除机制。不管怎样,因为所有的复选框都是相同的,所以您的表单将发布一个用逗号分隔的标记列表(在服务器端应该很容易处理)。

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

Blair McMillan 14 年前

链接到的站点,向返回查询结果的PHP页面发送请求。什么阻止你做同样的事情?将请求发送到的php/asp/无论什么页面,都可以做您需要做的任何事情来获取列表(从数据库、从外部站点缓存或任何东西),然后返回结果。

DigitalZebra 14 年前

好吧,据我所知,你有代码来做这个,但是你不想要一个预先定义的列表。

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

也许更好的方法是为此列表发出WebService请求,并在客户机上定义它。这样,您就可以动态地拉入多种类型的内容,而无需重新加载页面。您将对这些项发出Ajax请求,然后根据Ajax响应加载列表。

bradenkeith 14 年前

我的解决方案是使用loopj的token输入插件,稍微修改一下代码,这样它就可以返回所键入的内容。我想看看是否还有其他人有一个本机支持它的插件。