Question

最初的警告：我是jquery和javascript的新手。

我最近从bassistance.de开始使用autocomplete jquery插件。昨天，我找到了fcbkListSelection插件（http://www.emposha.com/javascript/fcbklistselection-like-facebook-friends-selector.html）并使用它在我的应用程序中包含一个选择器。

我现在想要做的是合并2个功能，因为我的选择器列表中有很多项目。更具体地说，我想在我的html中的facebook列表选择对象上面放置一个“按名称过滤”文本框。当用户在“按名称过滤”文本框中键入几个字符时，我希望Facebook列表选择器中的项目仅显示包含键入字符的项目 - 有点类似于自动完成功能已经存在，而不是结果显示在文本输入框下方，我希望它们动态更新facebook列表对象。

这可行且相对简单吗？如果是这样，有人可以描述一下如何做到这一点吗？如果没有，是否有更简单的方法来解决这个问题？谢谢！

好的，对于Spencer Ruport的评论，我想我可能已经有了一个更具体的问题。下面是我的HTML文件中的当前Javascript（尖括号代表Django标签）。＃suggest1和#fcbklist都是分开的，但我怎样让他们互相交谈呢？我是否需要在我的HTML文件中进一步编写javascript，还是需要自定义插件'.js的内容？这有助于详细阐述吗？

$（document）.ready（function（）{ var names = []; var count = 0; {％for a，b，c in friends_for_picker％} names [count] =“{{b}}”; count = count + 1; {％endfor％}

function findValueCallback(event, data, formatted) {
    $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
}

function formatItem(row) {
    return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
    return row[0].replace(/(<.+?>)/gi, '');
}

$("#suggest1").autocomplete(names, {
    multiple: true,
    mustMatch: false,
    autoFill: true,
    matchContains: true,
});

  //id(ul id),width,height(element height),row(elements in row)        
  $.fcbkListSelection("#fcbklist","575","50","4");
});

Answer 1

如果您只想过滤fcbkListSelection项，则根本不需要自动完成，实现过滤器非常简单。

以下是我放在一起的样本。基本功能就在那里，但更完整的解决方案将涉及编辑fcbkListSelection代码例如。尽管按预期过滤了列表，但当您单击某个项目以选择/取消选择它时，所有项目都会再次显示，这可能是不受欢迎的行为。
它并不像看起来那么令人生畏，插件代码很容易理解，并且添加这样一个简单的功能应该是无痛的。

托管演示： http://jsbin.com/ubeda（可通过http://jsbin.com/ubeda/edit进行编辑）

相关代码：

<input id="filter"/> 
<ul id="fcbklist"></ul> 

<script> 
  var $fcbklist = $('#fcbklist'); 

  var $listItems = $fcbklist.find('li'); 

  // id (ul id), width, height (element height), row (elements in row)         
  $.fcbkListSelection($fcbklist, 570, 50, 4); 

  $('#filter').keyup(function (){ 
    var $this = $(this); 

    var val = $this.val(); 

    /*** Show all the listItems when the filter is cleared ***/ 
    if (!val) { 
      $this.data('lastVal', val); 
      $listItems.show(); 
      return; 
    } 

    var lastVal = $this.data('lastVal'); 
    $this.data('lastVal', val); 
    /*** If the filter hasn't changed, do nothing ***/ 
    if(val === lastVal) { return; } 

    /*** Hide the results of the previous filter ***/ 
    $listItems.filter(':visible').hide(); 

    /*** 
      Show only the items of the current tab that match 
      the filter. 
    ***/ 
    var $tabItems; 
    switch($(".view_on").attr("id").replace("view_","")) { 
      case "all": 
        $tabItems = $listItems; 
        break; 
      case "selected": 
        $tabItems = $listItems.filter('[addedid]'); 
        break; 
      case "unselected": 
        $tabItems = $listItems.filter(':not([addedid])'); 
        break;   
    } 
    $tabItems.filter(':icontains(' + val + ')').show(); 
  }); 

  /*** 
    This is a custom pseudo-selector that selects 
    elements whose text contains the specified substring. 
    It is case-insensitive, unlike the built-in :contains selector. 
  ***/ 
  $.extend($.expr[':'], { 
    icontains: function(elem, i, match){ 
      return (new RegExp(match[3], 'im')).test($(elem).text()); 
    } 
  }); 
</script>

Answer 2

这是关于brianpeiris在上述解决方案中提到的问题的说明（否则看起来效果很好！）。

brianpeiris：“虽然名单是单击时按预期过滤在一个项目上选择/取消选择它，全部这些项目再次显示可能是不受欢迎的行为。“

要轻松解决此问题，只需删除fcbkListSelection.js中hiddenCheck函数的.show（）部分。

示例：

var hiddenCheck = function(obj) {
    switch (curTab()) {
        case "all":
            //elem.children("li").show();
            break;

        case "selected":
            elem.children("li:not([addedid])").hide();
            //elem.children("li[addedid]").show();
            break;

        case "unselected":
            elem.children("li[addedid]").hide();
            //elem.children("li:not([addedid])").show();
            break;
    }
}

另请注意brianpeiris提供的原始代码存在问题。每当清除过滤器时，它将显示所有项目;无论当前选择的选项卡如何。请参阅下文以解决此问题。

替换此

/*** Show all the listItems when the filter is cleared ***/ 
if (!val) { 
  $this.data('lastVal', val); 
  $listItems.show(); 
  return; 
}

有了这个

/*** Show all the listItems when the filter is cleared ***/
/*** ADDED: switch to fix error of always showing all entries ***/
if (!val) {
    $this.data('lastVal', val);
    switch ($(".view_on").attr("id").replace("view_", "")) {
        case "all":
            $listItems.show();
            break;
        case "selected":
            $listItems.filter('[addedid]').show();
            break;
        case "unselected":
            $tabItems = $listItems.filter(':not([addedid])').show();
            break;
    }
    return;
}

在此处更新： http://jsbin.com/ubeda/16

Answer 3

绝对不是直截了当的。完全可能。我建议你熟悉Javascript语法并试一试。如果你有一个更具体的问题回到这里，你会发现很多人都渴望提供帮助。

如何合并jquery自动完成和fcbkListSelection功能？

3 个答案: