Как объединить функции автозаполнения jquery и fcbkListSelection?

Question

Начальная оговорка: я новичок в jquery и javascript.

Я недавно начал использовать плагин автозаполнения jquery с bassistance.de. Вчера я нашел плагин fcbkListSelection (http://www.emposha.com/javascript/fcbklistselection-like-facebook-friends-selector.html) и использую его для включения селектора в моем приложении.

Теперь я хочу объединить две функциональные возможности, поскольку в моем списке селекторов много элементов. Чтобы быть более конкретным, я хочу поместить текстовое поле «Фильтровать по имени» над объектом выбора списка facebook в моем HTML. Когда пользователь вводит несколько символов в текстовое поле «Фильтровать по имени», я хочу, чтобы элементы в селекторе списка Facebook отображали только элементы, содержащие напечатанные символы - что-то вроде того, что уже делает автозаполнение, а не Результаты показаны ниже поля ввода текста, я хочу, чтобы они динамически обновляли объект списка facebook.

Возможно ли это и относительно просто? Если да, то может кто-нибудь описать, как это сделать? Если нет, есть ли более простой способ приблизиться к этому? Спасибо!

Хорошо, к комментарию Спенсер Рупорт, я думаю, у меня уже может быть более конкретный вопрос. Ниже приведен текущий Javascript в моем файле HTML (угловые скобки представляют теги Django). # offer1 и #fcbklist делают разные части, но как мне заставить их общаться друг с другом? Нужно ли мне в дальнейшем писать javascript в моем HTML-файле или мне нужно настраивать кишки плагинов .js? Это помогает уточнить?

$ (документ) .ready (function () { var names = []; var count = 0; {% для a, b, c в friends_for_picker%} names [count] = "{{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> 

Answer 2

Это примечание о проблеме, упомянутой в вышеупомянутом решении от brianpeiris (которая в противном случае, кажется, работает отлично!).

brianpeiris: «Хотя список фильтруется, как ожидается, при нажатии на элемент, чтобы выбрать / отменить его выбор, все предметы снова показывают, что возможно нежелательное поведение. "

Чтобы легко это исправить, просто удалите .show () части функции hiddenCheck в fcbkListSelection.js.

Пример:

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 и попробовать его. Когда у вас возникнет более конкретный вопрос, вернитесь сюда, и вы найдете множество людей, которые хотят помочь.