我使用ListJS的以下插件进行模糊搜索：
http://www.listjs.com/examples/fuzzy-search
我尝试通过添加我自己的方法来扩展插件，以第一个字母过滤，从点击事件的A-Z列表中选择。
问题是您按字母排序后，它会中断搜索并且不再过滤。我存储原始列表并在您按字母排序时将其重新添加，因为ListJS插件正在删除列表项而不是通过css隐藏它们。我不确定它是否会导致问题？有什么想法吗？
JS小提琴：
http://jsfiddle.net/xzzLuv3b/1/
HTML：
<div id="conditions-search-results">
<div class="col-md-12 conditions-search">
<h2 class="conditions-search-title">Find a Condition</h2>
<div class="conditions-search-form text-center">
<form class="form-inline form-flat-grey">
<div class="form-group">
<input type="text" class="form-control fuzzy-search" size="60" placeholder="Search by keyword or topic">
</div>
</form>
<div class="divider-wrapper">
<span class="divider-horizontal">OR</span>
</div>
<p>Choose by letter to browse conditions</p>
<ul class="list-unstyled conditions list-inline conditions-search-sort">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
<li><a href="#">R</a></li>
<li><a href="#">S</a></li>
<li><a href="#">T</a></li>
<li><a href="#">U</a></li>
<li><a href="#">V</a></li>
<li><a href="#">W</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Y</a></li>
<li><a href="#">Z</a></li>
</ul>
</div>
<div class="col-md-12 conditions-wrapper">
<ul class="list-unstyled conditions-index list"><li class="condition">
<div class="condition-title">Arthritis</div>
<div class="condition-description"><p>Arthritis is another autoimmune disease that is long-term and causes inflammation of joints and the surrounding tissue. Severe cases have been known to affect other organs, as well.</p></div>
</li><li class="condition">
<div class="condition-title">Back Pain</div>
<div class="condition-description"><p>Back pain can rear its ugly head in several forms. Whether you suffer from this condition due to genetics, age or from a work-related injury, we have the ability to help you with your discomfort.</p></div>
</li><li class="condition">
<div class="condition-title">Carpal Tunnel</div>
<div class="condition-description"><p>Excessive pressure placed on the median nerve of the wrist. It may cause loss of feeling, immobility, numbness or tingling.</p></div>
</li><li class="condition">
<div class="condition-title">Chronic Fatigue Syndrome</div>
<div class="condition-description"><p>Chronic Fatigue is continuous and often severe tiredness that isn’t remedied by rest and is not caused by any other known medical conditions.</p></div>
</li><li class="condition">
<div class="condition-title">Degenerative Disc Disease</div>
<div class="condition-description"><p>Degenerative Disc Disease isn’t actually a disease. Rather, it’s a sanctioned medical term used to describe the normal changes that occurs in spinal discs as the body ages.*</p></div>
</li><li class="condition">
<div class="condition-title">Degenerative Joint Disease</div>
<div class="condition-description"><p>Degenerative Joint Disease is more commonly known as Osteoarthritis. It is due to the wear and tear of joints throughout the body as it ages.</p></div>
</li><li class="condition">
<div class="condition-title">Failed Surgery</div>
<div class="condition-description"><p>Failed Surgery, also known as Failed Back Surgery Syndrome (FBSS) is chronic pain in the back or legs after a spinal surgery.</p></div>
</li><li class="condition">
<div class="condition-title">Fibromyalgia</div>
<div class="condition-description"><p>Fibromyalgia is a very real disorder causing constant pain and general unease. Those suffering from this condition are frequently in a constant state of pain.</p></div>
</li><li class="condition">
<div class="condition-title">Gastroesophageal Reflux</div>
<div class="condition-description"><p>Gastroesophageal Reflux disease (GERD) occurs when the contents of the stomach leak backwards from the stomach into the esophagus.”</p></div>
</li><li class="condition">
<div class="condition-title">Headaches</div>
<div class="condition-description"><p>Painful, chronic headaches can make even the simplest of daily tasks unbearable. Here at Pittsburgh Chiropractic and West Hills Medical Center we provide several services to ascertain the origin of your headaches and help alleviate the pain.</p></div>
</ul>
</div>
</div>
</div>
使用Javascript：
/**
* Target conditions search list for fuzzy search
* @type {List} List JS object
*/
var conditionsList = new List('conditions-search-results', {
valueNames: ['condition-title'],
plugins: [ ListFuzzySearch() ]
});
/**
* Toggle list items when searching
*/
$('.fuzzy-search').on('keypress', function(e){
// Show conditions matched to the letter
$('li.condition').show();
});
/**
* Filter by Letter
* @param {letter} Selected letter from search box
*/
function filterByLetter(letter){
$('.condition').filter(function() {
return $(this).find('.condition-title').text().charAt(0).toUpperCase() === letter;
}).show();
};
/**
* Filter click event
* Sort by the letter that was clicked.
*/
$('.conditions-search-sort a').on('click',function(e){
e.preventDefault();
// Restore the original list
$('.conditions-index').replaceWith(conditionsIndex);
// Hide all list items
$('li.condition').hide();
// Selected Letter
var letter = $(this).text();
// Filter and show list items
filterByLetter(letter);
});
// Original conditions list index
var conditionsIndex = $(conditionsList.list).clone();
答案 0 :(得分：1)
使用 List API 过滤模糊列表的结果，而不是编写自定义过滤。这样ListFuzzySearch就知道结果已被过滤，因此搜索只会对过滤后的结果起作用。
conditionsList.filter(); // resets the filter everytime
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
过滤方法最终看起来像这样
$('.conditions-search-sort a').on('click', function (e) {
e.preventDefault();
var letter = $(this).text();
conditionsList.filter();
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
});
这是一个演示 http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/3/
如果过滤器在键入时应重置，则应执行以下操作
$('.fuzzy-search').on('keypress', function (e) {
// Show conditions matched to the letter
conditionsList.filter();
$('li.condition').show();
});
$('.conditions-search-sort a').on('click', function (e) {
e.preventDefault();
var letter = $(this).text();
conditionsList.fuzzySearch.search(''); // this will make fuzzy ignore the text in the input.
conditionsList.filter(function (item) {
return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});
});
以下是更新的演示 http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/6/
但是，您需要一种方法来删除过滤器。可能在A-Z链接后添加重置？