我正在尝试使用下拉选择器使用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>