将插入样式应用到div中

Question

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

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

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

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

$(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/

联署材料：

 $('.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

对于你想要做的事情-有很多优秀的插件已经可用，提供了“更漂亮”的功能，而且你的工作要少得多。有些已经在评论中提出--我可能建议你考虑使用“被选中”。语法非常简单。只需按以下方式创建一个复选框：

<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- selected”选择器将允许您对所选项进行样式设置。

在一般情况下-即使你不喜欢这个特殊的插件，始终考虑运行搜索现有的项目，做你想要的。在这些并不完美的情况下，您可以始终改进它们，并将这种洞察力作为一个整体提供给社区。这样，每个人都能一起学习。

祝你好运！