Question

I have a document (sitemap) with a few uls in it.

<h3>Weekday</h3>
<ul>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
  <li>Thursday</li>
  <li>Friday</li>
  <li>Saturday</li>
  <li>Sunday</li>
</ul>
<h3>Car</h3>
<ul>
  <li>green BMW</li>
  <li>Mercedes</li>
  <li>Audi red</li>
  <li>Renault</li>
  <li>VW orange</li>
</ul>
<h3>Color</h3>
<ul>
  <li>green on Saturday</li>
  <li>blue</li>
  <li>red</li>
  <li>orange Friday</li>
</ul>

I’m trying to create a kind of custom AJAX search. The search is not based on real search-results but rather on all values in my sitemap.

When typing I’m loading the #inner div of my sitemap into my current page. This works actually fine. However right now my results are just the uls with the found list-elements displayed and the not matched ones set to display: none.

This is my current jQuery code:

var $sr = $('#searchresults'); //container where i want my list to go
$sr.load("/sitemap/" + " #inner", function() {
  $('#searchresults h3').remove(); //removing h3's
  $('#searchresults ul li').hide(); //hide all results at beginning

  var term = $('.s').val(); //current searchterm in inputbox

  var found = $('#searchresults ul li:icontains("' + $('.s').val() + '")'); //check for inputvalue
  found.addClass('matched'); //if matched addClass of .matched

  $('#searchresults .matched').show();
  $('#searchresults').children().slice(10).hide(); //max number of results

}); // end keydown

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Weekday</h3>
<ul>
  <li>Monday</li>
  <li>Tuesday</li>
  <li>Wednesday</li>
  <li>Thursday</li>
  <li>Friday</li>
  <li>Saturday</li>
  <li>Sunday</li>
</ul>
<h3>Car</h3>
<ul>
  <li>green BMW</li>
  <li>Mercedes</li>
  <li>Audi red</li>
  <li>Renault</li>
  <li>VW orange</li>
</ul>
<h3>Color</h3>
<ul>
  <li>green on Saturday</li>
  <li>blue</li>
  <li>red</li>
  <li>orange Friday</li>
</ul>

It works really well however I wonder if and how it is possible to not just load the sitemap and set the not-matched values to display:none but rather create a new list with all the results.

So actually I want to extract all .matched elements from their parent uls and wrap them in a new ul. So I have just on ul with all the .matched results and not a few ul’s with some .matched elements.

How can I achieve that?

Answer 1

So you want something like

$('li').each(function(i,e){
    if($('li.class').length>0){
        $(this).appendTo('#searchresults ul');
    }
)};

that is asumed that you what all li ‘s with class .. but if you want by the html match you could do..

$('li').each(function(i,e){
    if($('li.class').html()==$('.s').val()){
        $(this).appendTo('#searchresults ul');
    }
)};

little shorter and easier to read.. just some alts there.. hth Cheers -Jeremy