Question

这里的任何人都熟悉LISTJS插件吗？如果是这样，我需要你的协助。

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

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

总结一下 - 我想要另一个div中的输入字段，而不是＆＃34;用户＆＃34; - 如下所述。

 <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

可能你找到了解决方案，或者你实现了上面的解决方案。我认为如果你有替代方案，修改插件是不行的。我遇到了同样的问题，我使用list.js documentation中的listObj.search解决了这个问题。代码看起来像这样：

Model.where(id: id_value).first

Answer 2

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

的兄弟搜索输入

首先转到插件中的 init（）方法，添加一些选项及其默认值，让我们说options.searchWithId这是一个布尔值，指示你是否需要sible使用与您的搜索输入的ID相对应的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;
```

之后，您需要在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

这不能这样做，否则它不会与你的代码有关系，这就是为什么你必须把它包含在你的（Div）用户中的原因，你有什么特别的理由试图把它放在不同的（ DIV）

需要输入另一个div！ #listjs

3 个答案: