的JavaScript模糊搜索打破

Question

我使用下面的插件通过ListJS的模糊搜索：

我试图加入我自己的方法，按首字母来过滤扩展插件，从AZ列表中选择点击事件。

问题只要按字母排序，它就会中断搜索并不再过滤。我将原始列表存储起来，并在按字母排序时将其添加回来，因为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(); 

Answer 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/

---

更新

如果过滤器应然后输入reset以下应该这样做

$('.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链接之后添加重置？