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

Mark BranscumWeb DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prakash SamariyaIT ProfessionalCommented:
please try below code:

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

$("#lab2").text(Str);
0
Julian HansenCommented:
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
0
Mark BranscumWeb DeveloperAuthor Commented:
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

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
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
0
Mark BranscumWeb DeveloperAuthor Commented:
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
0
Mark BranscumWeb DeveloperAuthor Commented:
Here is my codepen you can see where I am going http://codepen.io/jsMarko/pen/qrGevG
0
Mark BranscumWeb DeveloperAuthor Commented:
The box to the right .bord2 ... is what I am aiming for ...... if you follow me
0
Mark BranscumWeb DeveloperAuthor Commented:
Perhaps .... it needs to be put into a new ordered list ... NOTE I dont know just shooting ideas
0
Julian HansenCommented:
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?
0
Prakash SamariyaIT ProfessionalCommented:
Replace below line
Str += $(this).text() + '\n';

Open in new window

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

Open in new window

0
Mark BranscumWeb DeveloperAuthor Commented:
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
0
Julian HansenCommented:
Something like this then
HTML
<input type="text" id="search-text" placeholder="Search" class="form-control"/>
<button id="search">Search</button>

Open in new window

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

Open in new window


Working sample here
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prakash SamariyaIT ProfessionalCommented:
Replace below
$(".bord2").text(Str);

Open in new window

With
$(".bord2").html(Str);

Open in new window

0
Julian HansenCommented:
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.
0
Mark BranscumWeb DeveloperAuthor Commented:
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
0
Mark BranscumWeb DeveloperAuthor Commented:
Julian I will keep in mind the other ways to alter it ...... again much appreciated .... spot on
0
Julian HansenCommented:
You are welcome.
0
Mark BranscumWeb DeveloperAuthor Commented:
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

0
Julian HansenCommented:
<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

1
Mark BranscumWeb DeveloperAuthor Commented:
Thank you works great
0
Prakash SamariyaIT ProfessionalCommented:
We are happy to help you. :)
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.