Нужен вклад в другой div! #listjs

Кто-нибудь здесь знаком с плагином 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>
Источник

4 ответа

Решение

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

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

    // 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>

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

Обновить

Скрипка демо

Источник

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

$("#searchInput").keyup(function () {   // #searchInput is your input
    var searchString = $(this).val();   // your searching string
    searchList.search(searchString);    // searchList is your new List
});
Источник

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

Источник

Поиск и сортировку можно запускать через javascript.

Как и для поиска, предположим, что идентификатор ввода для поиска - это mySearch

      $('#mySearch').on('keyup', function() {
  var searchString = $(this).val();
  userList.search(searchString);
});

Для поиска по определенному столбцу:

          $('#mySearch').on('keyup', function() {
  var searchString = $(this).val();
  userList.search(searchString, ['user']);
});

Аналогично для сортировки используйте функцию сортировки:

      $('#mySort').on('click',function() {
    userList.sort('user',{
        order: "desc"
    })
});
Источник
Другие вопросы по тегам