Нужна помощь в другом div! #listjs

Question

Кто-нибудь здесь знаком с плагином LISTJS? Если это так, я требую вашей помощи.

Отклонение до: http://codepen.io/javve/pen/zpuKF.

То, что я пытаюсь достичь, НЕ ХАВИТ вход поиска в пределах того же div, что и список.

Я хочу, чтобы поиск вводился в другом div. Это возможно? Если да, что мне делать, я предполагаю, что мне придется редактировать исходный код ...?

Подводя итог - я не могу ввести поле ввода в другой div, а не «пользователи» - как описано ниже.

<div id="THIS IS WHERE I WANT MY INPUT FIELD"></div> 
<div id="users"> 
<input class="search" placeholder="Search" /> 
<button class="sort" data-sort="name"> 
Sort by name 
</button> 

<ul class="list"> 
<li> 
    <h3 class="name">Jonny Stromberg</h3> 
    <p class="born">1986</p> 
</li> 
<li> 
    <h3 class="name">Jonas Arnklint</h3> 
    <p class="born">1985</p> 
</li> 
<li> 
    <h3 class="name">Martina Elm</h3> 
    <p class="born">1986</p> 
</li> 
<li> 
    <h3 class="name">Gustaf Lindqvist</h3> 
    <p class="born">1983</p> 
</li> 
</ul> 

</div> 
<script src="http://listjs.com/no-cdn/list.js"></script> 

Answer 1

Вы можете сделать это путем редактирования плагин, только некоторые несколько строк кода, чтобы добавить некоторые опции в плагин, чтобы сделать его принять поиск родственный вход по id

1. перейти к init() метод в плагин, чтобы добавить некоторые опции и их значения по умолчанию, скажем options.searchWithId, который является логическим, что указывает на то, если вы хотите sible вход поиска, используя id и options.searchId, которые соответствуют Id вашего поиска ввода:

   // If not provided in the options it takes false by default 
   self.searchWithId = options.searchWithId || false; 
   // In case search input with id, initialise the id 
   self.searchWithId ? self.searchId = options.searchId || false : void 0; 
   

2. После этого необходимо изменить выборку ввода объекта поиска путем добавления этих строк кода, перед связывать keyup события:

   var searchInput = null; 
   if(list.searchWithId === false){ 
       searchInput = getByClass(list.listContainer, list.searchClass); 
   } 
   else{ 
       searchInput = $("#"+list.searchId); 
   } 
   

3. И, наконец, изменить события связывания, как это:

   events.bind(searchInput, 'keyup', function(e) { 
       var target = e.target || e.srcElement, // IE have srcElement 
        alreadyCleared = (target.value === "" && !list.searched); 
       if (!alreadyCleared) { // If oninput already have resetted the list, do nothing 
        searchMethod(target.value); 
       } 
   }); 
   
   // Used to detect click on HTML5 clear button 
   events.bind(searchInput, 'input', function(e) { 
       var target = e.target || e.srcElement; 
       if (target.value === "") { 
        searchMethod(''); 
       } 
   }); 
   

4. Вы можете инициализировать ваш плагин следующим образом:

   var options = { 
       valueNames: [ 'name', 'born' ], 
       searchWithId: true, 
       searchId: "search-list" 
   }; 
   
   var userList = new List('users', options); 
   

и вы кладете вход поиска, где вы хотите (снаружи, внутри, ...)

<input id="search-list" class="search" placeholder="Search" /> 
<div id="users"> 

    <button class="sort" data-sort="name"> 
    Sort by name 
    </button> 

    <ul class="list"> 
    <li> 
     <h3 class="name">Jonny Stromberg</h3> 
     <p class="born">1986</p> 
    </li> 
    <li> 
     <h3 class="name">Jonas Arnklint</h3> 
     <p class="born">1985</p> 
    </li> 
    <li> 
     <h3 class="name">Martina Elm</h3> 
     <p class="born">1986</p> 
    </li> 
    <li> 
     <h3 class="name">Gustaf Lindqvist</h3> 
     <p class="born">1983</p> 
    </li> 
    </ul> 

</div> 

Я тестировал его, и он работает, если вы хотите, чтобы весь файл просто дал мне знать.

Update

Fiddle demo

Answer 2

Это не может быть сделано, как, что, в противном случае он не будет иметь отношения с вашим кодом ниже, это причина, почему вы должны были включить его в ваших (Div) пользователей, есть ли конкретная причина вы пытаетесь поставить его в другом (DIV)

Answer 3

Вероятно, вы выяснили решение или вы реализовали выше. Я думаю, что это не нормально, чтобы изменить плагин, если у вас есть альтернативы. У меня была та же проблема, и я решил ее, используя listObj.search от list.js documentation. Код будет выглядеть примерно так:

$("#searchInput").keyup(function() { // #searchInput is your input 
    var searchString = $(this).val(); // your searching string 
    searchList.search(searchString); // searchList is your new List 
});