I need a secondary review of the following script to help identify an issue of inconsistency with a function. The code allows me to perform a live search on a specified content. If a match is fount, it allows for me to click on a link and toggle() the content of an <em>.

My issues is that most of the time, the toggle function only displays half of the <em> content and I am unable to identify the issue. NOTE: This is only an issue a search is performed. If nothing is typed in the search box and you just click on the list, all works fine.

I appreciate any thoughts on this!

A link to the script in action is here

The code is below:

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function live_search(list) {

 ///*
  $('LI STRONG').click(function(e) {
        e.preventDefault(); // disable text selection

        return false; // disable text selection
    });

    $('LI STRONG').click(function(e) {
       $(this).parent().find('EM').slideToggle();
    });
 //*/ 

    $(".filterinput")
      .change( function () {
        var searchtext = $(this).val();
        if(searchtext) {

          $matches = $(list).find('a:Contains(' + searchtext + ')').parent();
          $matches.slideDown();



        } else {
          $(list).find("li").slideDown(200);
        }
        return false;
      })
    .keyup( function () {
        $(this).change();


        var s = $(this).val().trim();
        if (s === '') {
            $('#contents LI').show();
            return true;
        }
        $('#contents LI:not(:contains(' + s + '))').hide();
       $('#contents LI:contains(' + s + ')').show();
        return true;

    });
  }

  $(function () {
    live_search($("#contents"));
  });
}(jQuery));

Best,
Mossa

Recommended Answers

All 16 Replies

Why do you have two of these?

$('LI STRONG').click(function(e) { /* */ });

It's not showing everything because your

$('#contents LI:not(:contains(' + s + '))').hide();

is also hiding the li's in your em ol which you want to show.

Thanks pritaeas,
not including the line below, causes the live search feature to not function.

$('#contents LI:not(:contains(' + s + '))').hide();

Change to this and then run it

        #faq EM
        {
            /*display: none;*/
        }

You can see what it is doing then - I'm just not clear on its intended behaviour.

Try:

$('#contents ul#contents LI:not(:contains(' + s + '))').hide();

I'm just not clear on its intended behaviour.

He has a nested li. He should hide the parent one if it does not match the search term, but the current hide() also works on the nested li.

DaveAmour, I appreciate your thoughts on the post...

Pritaeas,

the modified line as suggested still causes the live search function to stop working.

Any further thoughts!

Thanks Pritaeas.

This time it allows for a continued live search but the inconsistency with the display of the nexted content presists.

Please do let me know when have had a moment to test the code.

Thanks again!

I don't think this is doing anything inconsistent - the behaviour is always the same right?

No, sometime it actually displays the entire content. But 99% of the time it only displays partial content.

sometime it actually displays the entire content.

But is that content consisting of a single li?

Hmm thats not what I mean by inconsistency. Does it always behave the same for the same search text. If it does not that would be inconsistent and would be very worrying.

Ok, I tested the li containing the searched content with a more specific classname, like so:

$('#contents LI.answers:not(:contains(' + s + '))').hide();   
 $('#contents LI.answers:contains(' + s + ')').show();

This has cured the issue. It now displays all content. I guess the other way was too broad.

Now, I am noticing another issue. Is there a way to make the search not case sensitive. At the moment if the content begins with Capital letter and the search is being performed with lowercase letters, it matches only the first and second character of the search key word. ie: search term: "adding" it will produce a list up until "ad" pass that it produces 0. If However I search "Adding" it works fine.

I wonder if I can modify to respond to lower and uppercase content.

Any thoughts on this new request!

To make it not case sensitive just lower case your search term and your search text. I don't mean lower your seach text in your document but in code.

My apology DaveAmour, I am not quite following your meaning. Could you please expond a bit more --perhaps with a sample code.

Great stuff, DaveAmour!

Works well..Thank you very much!

Best,
Mossa

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.