Javascript模糊搜索中断

Question

我使用ListJS提供的以下插件进行模糊搜索：

http://www.listjs.com/examples/fuzzy-search

我尝试扩展插件，添加我自己的方法来过滤第一个字母，从点击事件的A列表中选择。

问题一旦你按字母排序，它就会打破搜索，不再过滤。当您按字母排序时，我正在存储原始列表并将其添加回去，因为ListJS插件正在删除列表项，而不是通过css隐藏它们。我不确定它是否引起了问题？有什么想法吗？

JS Fiddle:

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

使用列表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链接后添加一个重置？