Search from a list and remove siblings when search result found

Question

I am trying to add a search filter so that user can find results from this list of contracts while they are typing. E.g.: if a user types "IP", then the top 4 results should be displayed. Following is the function:

$('#doc_search').on('keyup', function(){

    var inputtext = $(this).val().toLowerCase();

    $('.subdoclist li a').each(function() {
         if(inputtext ==''){
            $('.subdoclist li').each(function(){
                $(this).addClass('show');
            });
             console.log(inputtext);
         } else if ($(this).text().toLowerCase() === inputtext) {

            $('.subdoclist li').removeClass('show');
             $(this).parent().addClass('show');
             console.log(inputtext);
         } 

    });
})

• '#doc_search' is the search field on top
• '.subdoclist li' are the list items that contain anchor tags with text

At the moment, I have to type exact text and only then the search works.

Fiddle link: Click here

Answer 1

Here it is with a couple of things fixed up, first I'm using indexOf > -1 to see if the input string is contained within each potential match, and instead of removing show on all of them per-match I do it before it performs the search.

$('#doc_search').on('keyup', function() {
  var inputtext = $(this).val().toLowerCase();
  if (inputtext != '') {
    $('.subdoclist li').removeClass('show');
    $('.subdoclist li a').each(function() {
        if ($(this).text().toLowerCase().indexOf(inputtext) > -1) {
        $(this).parent().addClass('show');
     }
        });
   } else {
     $('.subdoclist li').addClass('show');
   }
});

Answer 2

If you want a simple search, you can check if the text entered is contained on the string like this: How to check whether a string contains a substring in JavaScript?

You can check each word entered on the search, splitting the string with space delimiter and using a loop but that will take more effort if there too words or a lot if entries.