Question

我正在按标签输入框构建搜索，如下所示：

原谅可怕的造型，因为这只是大型应用程序的一个小组件，我刚刚添加了显示我的问题所需的样式。

我的搜索框是div，它使用Jquery插入文本，如下所示：

$(document).ready(function () {
 $('.search-box').click(function () {
     $('.search-options').toggle();

 });

 $('.options').click(function () {

     var d = $('.search-box').html();
     console.log(d);
     var c = $(this).html();
     console.log(c);
     if (d != '') {
         $('.search-box').html(d + ', ' + c);
     } else {
         $('.search-box').html(c);
     }
     $('.search-options').hide();
 });
 $('#reset').click(function () {
     $('.search-box').html('');
 });
 });

其中.search-box是输入div，.options是下拉框search-options中的可点击选项。

目前，每个选项的文本都插入到搜索框div中。我需要在进入搜索框时动态设置它。

我尝试了以下几点：

  $('<span>').addClass('tag').append(
                    $('<span>').text(value).append('&nbsp;&nbsp;'),
                    $('<a>', {
                        href  : '#',
                        title : 'Removing tag',
                        text  : 'x'
                    });

其中在样式表中定义了tag类，以将元素设置为看起来像标记，但这根本不起作用。有人可以帮我解决如何使输入文本的样式看起来像Evernote笔记本上的标签吗？

谢谢！

Answer 1

我适应了你的小提琴。只需将c包含在带有类的范围内（就像您在帖子的第二部分中尝试的那样）并在css中应用样式。我刚刚将背景设为红色，但它应该很容易让它看起来像下拉列表中的标签。

http://jsfiddle.net/7nUAf/1/

JS：

 $('.options').click(function () {
     var d = $('.search-box').html();
     var c = $(this).html();
     $('.search-box').append('<span class="tag">'+c +'</span>');
     $('.search-options').hide();
 });

CSS：

.tag {
    background: red;
}

Answer 2

对于您要做的事情 - 已经有许多优秀的插件可以提供更“漂亮”的功能，而且您的工作量更少。评论中已经提出了一些建议 - 我建议考虑使用"chosen"。语法非常简单。只需创建一个选择框，如下所示：

<select id="test" multiple>
  <option>pdf</option>
  <option>document</option>
</select>

然后在您的文档就绪功能中，您只需要调用所选的插件：

$(document).ready(function () {
    $('#test').chosen({width: "80%"});
});

我把一个在JSFiddle上执行此操作的示例放在一起：http://jsfiddle.net/7nUAf/3/。一旦达到使用它的程度，您可以通过检查所选元素的创建方式轻松地设置元素的样式。例如，“li.search-choice”选择器将允许您设置所选项目的样式。

一般 - 即使您不喜欢这个特定的插件，也要考虑运行搜索您正在寻找的现有项目。如果这些并不完美，您可以随时改进它们，并将这种洞察力作为一个整体提供回社区。这样，每个人都在一起学习。

祝你好运！

在插入div时应用样式

2 个答案: