Question

我正在尝试通过标签输入框构建搜索，这类似于Xoxco在此处找到的演示

http://xoxco.com/projects/code/tagsinput/example.html

我会从github使用他的项目，但我的实现是在我已经存在的应用程序中，当我将他的项目导入我的时，它会中断。

所以目前我已经在http://jsfiddle.net/Newtt/3eHXN/2/启动并运行了大部分基本功能。

目前，当我点击某个选项时，它会出现在搜索框中。我的问题是如何显示多个项目，其次，如何设置单击后搜索框内显示的单词的样式？

对于第二个问题，我想的是：

$('.options`).click(function(){
    var c = $(this).html();
    var a = c.css('background':'#ccc',
                  'color':'#000',
                  'width':25px');
    $('#search-by-tags').val(a);
});

它在小提琴中不起作用，所以我想知道我哪里出错了，我该怎么纠正呢？

谢谢！

Answer 1

<强> Working Fiddle

$(document).ready(function(){
            $('#search-by-tags').focus(function(){
                $('#input-tags').show('slow');
            });
            $('#search-by-tags').blur(function(){

            });
            $('.options').click(function(){
                var currentval=$('#search-by-tags').val()
                if(currentval!="")
                $('#search-by-tags').attr('value', currentval+','+$(this).html());
                else
                 $('#search-by-tags').attr('value',$(this).html());
                $('#input-tags').hide('slow');
            });
            $('#search-button').click(function(){
                $('#search-by-tags').attr('value','');
                 $('#input-tags').hide('slow');
            });
        });

Answer 2

为此我改变了一点，就像我声明了一个全局数组arr，它保存了用户选择的值，你可以尝试这个更新的：

$(document).ready(function () {
   var arr = []; //<-----------------------------declare a global array here
   $('#search-by-tags').focus(function () {
      $('#input-tags').show('slow');
   });
   $('#search-by-tags').blur(function () {

   });
   $('.options').click(function () {
      arr.push($(this).html()); //<------------push the selected item
      $('#search-by-tags').val(arr);  //<------place the current array arr
      $('#input-tags').hide('slow');
   });
   $('#search-button').click(function () {
      $('#search-by-tags').val('');  //<------use .val('') to make it blank
      $('#input-tags').hide('slow');
  });
});

Demo Fiddle

注意：

而不是以这种方式使用.attr()：

$('#search-by-tags').attr('value',$(this).html());

您可以使用.val()：

按照上面的答案中的建议尝试此操作

$('#search-by-tags').val(arr);

按标签输入下拉搜索

2 个答案:

Demo Fiddle

注意：