Javascript 需要在另一个div中输入#listjs

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

引用到：

我试图实现的是，搜索输入与列表不在同一个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>

按名称排序


乔尼·斯特隆伯格
1986年



乔纳斯·阿恩克林特
1985年


玛蒂娜·埃尔姆
1986年



古斯塔夫·林克维斯特
1983年

这不能这样做，否则它与下面的代码没有关系，这就是为什么你必须将它包含在你的（Div）用户中的原因，你有什么特别的原因试图将它放在不同的（Div）中吗，只需几行代码就可以向插件添加一些选项，使其通过

id

首先转到插件中的init（）方法添加一些选项及其默认值，比如说

选项。searchWithId

是一个布尔值，它指示您是否希望使用

id

和

选项进行可靠的搜索输入。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('');
    }
});

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

您可以通过以下方式初始化插件：

var options = {
  valueNames: [ 'name', 'born' ],
  searchWithId: true,
  searchId: "search-list"
};

var userList = new List('users', options);

然后你把你的搜索输入放在你想要的地方（外面，里面，…）

按名称排序


乔尼·斯特隆伯格
1986年



乔纳斯·阿恩克林特
1985年


玛蒂娜·埃尔姆
1986年



古斯塔夫·林克维斯特
1983年

我测试了它，它的工作，如果你想要整个文件，请告诉我

更新

---

可能是您想出了一个解决方案，或者是您实现了上述解决方案。我认为如果你有其他选择，修改插件是不合适的。我也遇到了同样的问题，我使用listObj.search from解决了这个问题。代码将如下所示：

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

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

---

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