个人中心
gpt4 book ai didi

jquery - Facebook/Youtube 喜欢多个项目 选择

转载 作者：行者123 更新时间：2023-12-01 03:55:55 25 4
gpt4 key购买 nike

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

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

最佳答案

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

总体要点是...

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

代码如下:

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

看看演示 - 这是您想要的吗？

关于jquery - Facebook/Youtube 喜欢多个项目 选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2803956/

25 4 0
文章推荐： javascript - 设置变量之前检查项目是否缺失
文章推荐： python - 带插值的 vtk 3D 图像旋转/平移 (python)
文章推荐： jQuery ajax 不预加载图像
文章推荐： jquery - 如何在 jquery 表单验证上显示独特的成功消息
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com