需要输入另一个div！ #listjs

Question

这里有人熟悉 LISTJS 插件吗？如果是这样，我需要你的帮助。

我想要实现的是不在与列表相同的 div 中搜索输入。

我想要另一个 div 中的搜索输入。这可能吗？如果是这样，我该怎么办，我想我将不得不编辑源代码...？

总而言之 - 我不想要另一个 div 中的输入字段，而不是 "users" - 如下所述。

 <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

这不能那样做，否则它不会与您下面的代码有关系，这就是为什么您必须将它包含在您的 (Div) 用户中的原因，您是否有任何特殊原因尝试这样做把它放在不同的 (DIV)

Answer 2

您可以通过编辑插件来完成，只需几行代码即可向插件添加一些选项，使其接受 id

的兄弟搜索输入

首先到插件中的init()方法添加一些选项和它们的默认值，比方说options.searchWithId这是一个布尔值，指示您是否要使用 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;

之后，您需要通过添加这些代码行来修改输入搜索对象检索，就在 keyup 事件绑定之前：

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

最后像这样更改事件绑定：

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('');
    }
});

你可以这样初始化你的插件：

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>

我测试了它并且它有效，如果你想要整个文件请告诉我。

更新

Fiddle demo

Answer 3

可能您找到了解决方案或实施了上述解决方案。我认为如果您有其他选择，修改插件是不行的。我有同样的问题，我通过使用 list.js documentation 中的 listObj.search 解决了它。代码看起来像这样：

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

Answer 4

可以通过javascript触发搜索和排序。

喜欢搜索，假设搜索输入id是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"
    })
});

需要输入另一个div！ #listjs

Need input in another div! #listjs

html

javascript

input

listjs