List.js下拉选择 - 模糊搜索可能吗?

时间:2016-10-04 21:47:25

标签: javascript jquery drop-down-menu filter

我正在尝试使用下拉选择器使用List.js的模糊搜索。原因是我有一个项目可以让主持人搜索到一个活动行程。问题是,每个会话有多个演示者,并且数量因每个会话而异。你也会在我的代码中看到一些重叠。我希望下拉列表过滤列表以显示由特定演示者主演的所有会话。由于看起来list.js搜索开箱即可找到每个列表项的单个值的匹配,我不能仅创建一个名为“presenter”的列表项,因为每个会话将有多个。

我想只是在一个包含所有细节的类中列出演示者,然后使用模糊搜索来查找名称。但我无法让它发挥作用。我不知道模糊搜索不能做下拉,参数不正确,或者只是一个简单的傻瓜。我为这个here做了一个jsfiddle,下面是我的代码。任何帮助将不胜感激!

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

var options = {
  valueNames: ['date', 'timestamp', 'venue', 'details'],
  plugins: [
    ListFuzzySearch()
  ]
};

var fuzzyOptions = {
  searchClass: "fuzzy-search",
  location: 5,
  distance: 400,
  threshold: 0.4,
    multiSearch: true
};

document.getElementById('filterByTeller').addEventListener('change', function() {
  var selectedTeller = this.options[this.selectedIndex].value;
  if (selectedTeller == "") {
    userList.filter();
    return;
  }
  userList.filter(function(item) {
    return item.values().details == selectedTeller;
  });
});
h2 {
  font-family:sans-serif;
}
.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.avatar {
  max-width: 150px;
}
img {
  max-width: 100%;
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
p {
  margin:0;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:30px;
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:13px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}

.hide {
visibility: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://listjs.com/no-cdn/list.js"></script>
<script src="http://listjs.com/no-cdn/list.fuzzysearch.js"></script>
<div id="users">
  <input class="fuzzy-search" placeholder="Search" />
  
  <select id="filterByTeller" class="fuzzy-search">
  <option value="">All</option>
  <option value="Karen Ogden">Karen Ogden</option>
  <option value="Faith Buckland">Faith Buckland</option>
  <option value="Carl King">Carl King</option>
  <option value="Joseph Taylor">Joseph Taylor</option>
  <option value="Felicity North">Felicity North</option>
	<option value="Charlotte Blake">Charlotte Blake Alston</option>
	</select>
<ul class="list">
<li>
<p class="date"> <span class="timestamp hide">1462442400</span><strong>Wed., May 5, 2016</strong></p>
<p class="venue"><strong>County Public Library</p>
<p class="details">In this special evening, the stages are a platform for festival tellers and open-mic tellers alike to share true, personal tales on what home means to them.<br />
10 a.m. Ages: Pre-K<br />
Tellers: Karen Ogden, Faith Buckland</p>
</li>

<li>
<p class="date"> <span class="timestamp hide">1462442400</span><strong>Wed., May 5, 2016</strong></p>
<p class="venue"><strong>Kirkland Center</p>
<p class="details">Listen to local high school tellers share spooky tales they have crafted in pre-festival workshops.<br />
7 p.m. Ages: All<br />
Tellers: Carl King, Joseph Taylor, Felicity North</p>
</li>

<li>
<p class="date"> <span class="timestamp hide">1462442400</span><strong>Wed., May 5, 2016</strong></p>
<p class="venue"><strong>Miller Amphitheater</p>
<p class="details">Grande Finale event.
Kirkland Center, 7 p.m. Ages: All
Tellers: Karen Ogden, Faith Buckland, Carl King, Joseph Taylor, Felicity North</p>
</li>
</ul>
</div>

0 个答案:

没有答案