Javascript Fuzzy Search Breaking

Question

I am using the following plugin by ListJS for a fuzzy search:

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

I tried extending the plugin by adding my own method to filter by first letter, selecting from an A-Z list on click event.

The problem is as soon as you sort by letter, it breaks the search and wont filter anymore. I am storing the original list and adding it back in when you sort by letter because the ListJS plugin is removing list items and not hiding them by css. I am not sure if it's causing a problem or not? Any ideas?

JS Fiddle:

http://jsfiddle.net/xzzLuv3b/1/

HTML:


    
        Find a Condition
        
                   
                
                    
                
            
            
                OR
            
            Choose by letter to browse conditions
            
                A
                B
                C
                D
                E
                F
                G
                H
                I
                J
                K
                L
                M
                N
                O
                P
                Q
                R
                S
                T
                U
                V
                W
                X
                Y
                Z  
            
        
        

                    Arthritis
                    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.
                

                    Back Pain
                    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.
                

                    Carpal Tunnel
                    Excessive pressure placed on the median nerve of the wrist. It may cause loss of feeling, immobility, numbness or tingling.
                

                    Chronic Fatigue Syndrome
                    Chronic Fatigue is continuous and often severe tiredness that isn’t remedied by rest and is not caused by any other known medical conditions.
                

                    Degenerative Disc Disease
                    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.*
                

                    Degenerative Joint Disease
                    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.
                

                    Failed Surgery
                    Failed Surgery, also known as Failed Back Surgery Syndrome (FBSS) is chronic pain in the back or legs after a spinal surgery.
                

                    Fibromyalgia
                    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.
                

                    Gastroesophageal Reflux
                    Gastroesophageal Reflux disease (GERD) occurs when the contents of the stomach leak backwards from the stomach into the esophagus.”
                

                    Headaches
                    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.

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();

Dhiraj · Accepted Answer

Using the List API filter the results of the fuzzy list instead of writing a custom filtering. This way ListFuzzySearch knows that the results have been filtered and thus the search will only work on the filtered results.

conditionsList.filter(); // resets the filter everytime

conditionsList.filter(function (item) {
    return $(item.elm).find('.condition-title').text().charAt(0).toUpperCase() == letter;
});

The filter method finally looks like this

$('.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;
    });

});

Here is a demo http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/3/

Update

If the filters should reset on typing then the following should do it

$('.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;
    });

});

Here is an updated demo http://jsfiddle.net/dhirajbodicherla/xzzLuv3b/6/

However, you would need a way to remove the filter. Probably by adding a reset after A-Z links?

Javascript Fuzzy Search Breaking

Answers (1)

Update

Related Questions