Link to home
Start Free TrialLog in
Avatar of Mark Branscum
Mark BranscumFlag for United States of America

asked on

jquery .... <li>Danny Partridge</li> Input Search ---> Partridge <--- Return ----> Danny Partridge

Just as my title shows

jquery  .... <li>Danny Partridge</li>  Input Search --->  Partridge <---        Return  ---->   Danny Partridge  

Here is my search code and also counting results

 var sName = $("#nameSearch").val();
    $("li").removeClass('result');
    $("li:contains('" + sName + "')").addClass('result');
    
    var rCount = $("li:contains('" + sName + "')").length;
    $("#lab2").text(sName + " " + rCount);

Open in new window

Avatar of Prakash Samariya
Prakash Samariya
Flag of India image

please try below code:

var Str='';
$("li:contains('" + sName + "')").each(function(){
       Str+=$(this).text()+'\n';
    });

$("#lab2").text(Str);
Here is some sample code that demonstrates the concept
  <ul id="hide-names">
	<li>Danny Partridge</li>
	<li>Metisula Grinswald</li>
	<li>Lionla Pi</li>
	<li>Dantrisky Pinewood</li>
  </ul>

Open in new window

jQuery
<script>
$(function() {
  $('#search').keyup(function() {
    var srch = this.value.toLowerCase();
    var count = 0;
    $('#hide-names li').each(function(i, e) {
      if ($(e).text().toLowerCase().indexOf(srch) == -1) {
        e.style.display =  'none';  
      }
      else {
        e.style.display =  'block';  
        count++;
      }
    });
    
    $('h2 span').html(count);
  });
});
</script>

Open in new window


Working sample here
Avatar of Mark Branscum

ASKER

Yes this works  ......  it is returning something like this David Doe Jane Doe    ........ would it be possible to modify this to this

David Doe
Jane Doe

please note if you would rather I can put that in another question .... I should havve mentioned that at the beginning that is my bad

    var Str = '';
    $("li:contains('" + sName + "')").each(function() {
      Str += $(this).text() + '\n';
    });

    $(".bord2").text(Str);

  });

Open in new window

Do you want the text to be returned when you are finished typing into the search box (onchange) or as you type?

BTW use <br/> instead of \n if you want a new line in the html
Julian Hansen ... wasnt able to see your example .....

It will take me a bit to see how to put this in my code to test ..... be back asap
Here is my codepen you can see where I am going http://codepen.io/jsMarko/pen/qrGevG
The box to the right .bord2 ... is what I am aiming for ...... if you follow me
Perhaps .... it needs to be put into a new ordered list ... NOTE I dont know just shooting ideas
Julian Hansen ... wasnt able to see your example .....
Works for me - please try again.

The solutions above don't really take case into account - is that an issue?

In your code pen - what is the box on the right for - does not appear to do anything?
Replace below line
Str += $(this).text() + '\n';

Open in new window

With
Str += $(this).text() + '<br/>';

Open in new window

Prakash Samariya
Its returning this in .bord2    ........ Cindy Nelson<br/>Ricky Nelson<br/>  ... the break tags are appearing with the names as shown
nut it looks like its going there


Julian Hansen

.bord2 the box to the right will catch the names ... just updated codepen you can see what I am aiming towards ..... then end result Is for it to have the names appear as they do on the left as names are found
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That sample can be altered in a variety of ways - for instance - you can make it so that as you type items that match are shown on the right
Or
You can have it that as you type items are removed from left and added to right.

Post back with exact requirements.
Ok guys ... sorry for the delay but my daughter called :) priorities right?

Ok, Both of these work ....... However ..... Julian Your code is more what I am shooting for ...... as it answered a question that I hadnt thought of until you both started shooting your ideas .... that was the ul or ol list .... to put it in a list ... Julian you accomplished that ... but to be fair as to my  original question both provided code to accomplish what was asked ........ I will be going with Julian's code as best solution but Prakash as assisted

 Thank you guys I have learned so much from you both and your effort is much appreciated      Mark
Julian I will keep in mind the other ways to alter it ...... again much appreciated .... spot on
You are welcome.
Julian I know this question is closed but .... I lost my count ... trying to figure out how to get it back in your code but not having success

this is what I had to count  
var rCount = $("li:contains('" + sName + "')").length;
 $("#lab2").text(sName + " " + rCount);

Open in new window

<script>
$(function() {
  $('#search').click(function() {
	var srch = $('#search-text').val().toLowerCase();
	var count = 0;
	$('#matched-names').empty();
	$('li').each(function(i,e) {
		if ($(e).text().toLowerCase().indexOf(srch) != -1) {
			$('#matched-names').append($(e).clone());
			count++;
		}
	});
  });
});
</script>

Open in new window

Thank you works great
We are happy to help you. :)