Avatar of Mark Branscum
Mark Branscum
Flag 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

jQueryJavaScript

Avatar of undefined
Last Comment
Prakash Samariya

8/22/2022 - Mon
Prakash Samariya

please try below code:

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

$("#lab2").text(Str);
Julian Hansen

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
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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Julian Hansen

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
Mark Branscum

ASKER
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
Mark Branscum

ASKER
Here is my codepen you can see where I am going http://codepen.io/jsMarko/pen/qrGevG
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Mark Branscum

ASKER
The box to the right .bord2 ... is what I am aiming for ...... if you follow me
Mark Branscum

ASKER
Perhaps .... it needs to be put into a new ordered list ... NOTE I dont know just shooting ideas
Julian Hansen

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?
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Prakash Samariya

Replace below line
Str += $(this).text() + '\n';

Open in new window

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

Open in new window

Mark Branscum

ASKER
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
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Julian Hansen

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Mark Branscum

ASKER
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
Mark Branscum

ASKER
Julian I will keep in mind the other ways to alter it ...... again much appreciated .... spot on
Julian Hansen

You are welcome.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Mark Branscum

ASKER
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

Julian Hansen

<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

Mark Branscum

ASKER
Thank you works great
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Prakash Samariya

We are happy to help you. :)