需要在另一个 div 中输入！ #listjs答案

【问题标题】：Need input in another div! #listjs需要在另一个 div 中输入！ #listjs
【发布时间】：2015-04-18 23:56:57
【问题描述】：

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

我想要实现的不是将搜索输入放在与列表相同的 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>

【问题讨论】：

标签： javascript html input listjs

【解决方案1】：

可能您找到了解决方案，或者您实施了上述解决方案。我认为如果您有其他选择，修改插件是不行的。我遇到了同样的问题，我通过使用来自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
});

【讨论】：

【解决方案2】：

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

首先转到插件中的 init() 方法添加一些选项和它们的默认值，比如说options.searchWithId，它是一个布尔值，表示您是否需要使用 @ 进行单一搜索输入987654324@ 和 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

【讨论】：

非常感谢您抽出宝贵时间帮助我！完美运行 - 谢谢！
这是一个很好的解决方案，但不幸的是它破坏了分页。

【解决方案3】：

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

【讨论】：

【解决方案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"
    })
});

【讨论】：