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

Question

初步警告:我是 jquery 和 javascript 的新手。

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

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

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

好的，对于 Spencer Ruport 的评论，我想我可能已经有一个更具体的问题了。下面是我的 HTML 文件中当前的 Javascript(尖括号代表 Django 标签)。 #suggest1 和 #fcbklist 都做各自的工作，但我如何让他们互相交谈？我是否需要在 HTML 文件中进一步编写 javascript，或者是否需要自定义插件 .js 的内容？这有助于详细说明吗？

$(文档).ready(函数() { 变量名称 = []; 变量计数 = 0； {% for a, b, c in Friends_for_picker %} 名称[计数] = "{{ b }}"; 计数=计数+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>