javascript - 需要在另一个 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>

score 4 · Accepted Answer

可能您找到了解决方案，或者您实施了上述解决方案。我认为如果您有其他选择，修改插件是不行的。我遇到了同样的问题，我通过使用list.js 文档中的 listObj.search 解决了这个问题。代码将如下所示：

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

score 3 · Accepted Answer

您可以通过编辑插件来做到这一点，只需几行代码即可向插件添加一些选项，使其接受同级搜索输入id

首先转到插件中的init()方法添加一些选项及其默认值，假设options.searchWithId这是一个布尔值，指示您是否要使用 an 进行单一搜索输入，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>

我对其进行了测试，它可以工作，如果您想要整个文件，请告诉我。

更新

小提琴演示

score 0 · Accepted Answer

This cannot be done like that, otherwise it wont have relation with your code below, that's the reason why you had to include it in your (Div) users, is there any particular reason you trying to put it in a different (DIV)

score 0 · Accepted Answer

搜索和排序可以通过 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"
    })
});

javascript - 需要在另一个 div 中输入！#listjs

4 回答 4

Related

Reference