CODEWITHSUNDEEP
javascriptjquerysearch
Robert
Robert

Reputation: 4406

Is there a way to use javascript/jquery to search a group of li tags and narrow the search down

I have been looking all over the web for ideas on how to do this. I have a DrillDown menu that at some points goes six levels deep (not my choice this is what the customer wants) I have created an xml document that holds all of these items there are a total of 106 different options that a user can select just in the side menu alone (again its what the customer wants). I want to create a search box that would allow me to type in the name of one of the selections and the list would shrink to only show the options with the word(s) that the user inputs.

My question Is there a plugin that would allow this behavior?

If not How do you search a group of li elements for text?

Upvotes: 15

Views: 17784

Answers (6)

Zahid Gani
Zahid Gani

Reputation: 165

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // Start here: Search Service area via jQuery
  window.filter = function(element)
  {
    var value = $(element).val().toUpperCase();
    $(".left_message > li").each(function() 
    {
      if ($(this).text().toUpperCase().search(value) > -1){
        $(this).show();
      }
      else {
        $(this).hide();
      }
    });
  }
});
</script>

<input type="text"  placeholder="Enter text to search" onkeyup="filter(this);">

<ul role="tablist" class="left_message">
    <li><a href="#"><span>Anupk Kumar</span></a></li>
    <li><a href="#"><span>Pradeep Kumar</span></a></li>
    <li><a href="#"><span>Zahid Gani</span></a></li>
    <li><a href="#"><span>Amitabh</span></a></li>
    <li><a href="#"><span>Chandan Gupta</span></a></li> 
</ul>



Result : Search Zahid , they return following output

<ul role="tablist" class="left_message">`enter code here`
    <li><a href="#"><span>Zahid Gani</span></a></li>    
</ul>

Upvotes: 1

Alex
Alex

Reputation: 1668

You can try using this concept:

$('.search').keyup(function(){
    if( $(this).val().length > 0 ){
        var foundin = $('#drilldown').find('li a:contains("'+$(this).val()+'")');
    }
});

Upvotes: 0

antyrat
antyrat

Reputation: 27765

You can try to filter by contains selector:

var matches = $( 'ul#myMenu' ).find( 'li:contains(search string) ' );
$( 'li', 'ul#myMenu' ).not( matches ).slideUp();
matches.slideDown();

See example on jsFiddle

Upvotes: 7

DaveB
DaveB

Reputation: 3083

To code it yourself would be fairly straightforward, the jQuery below takes a string from the input #inputString and will iterate through the list items "ul li" and show/hide depending if they match the input string.

You can modify the "ul li" selector to contain other lists if needed

jQuery("#inputString").keyup(function () {
    var filter = jQuery(this).val();
    jQuery("ul li").each(function () {
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
            jQuery(this).hide();
        } else {
            jQuery(this).show()
        }
    });
});

I expect there are many plugins that do the same thing, give it a google!

Upvotes: 37

Draykos
Draykos

Reputation: 822

Using the drilldown sample here:

http://www.designchemical.com/lab/jquery-drill-down-menu-plugin/getting-started/

This is my suggestion:

$('#drilldown').find("a:contains('Product')");

Upvotes: 0

Adriano Carneiro
Adriano Carneiro

Reputation: 58615

How do you search a group of li elements for text?

var filteredLIS = $("li:contains('" + yourQuery + "')");

Reference: http://api.jquery.com/contains-selector/

Upvotes: 2

Related Questions