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

Mark Branscum
Mark Branscum used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Prakash SamariyaIT Professional
Top Expert 2015

Commented:
please try below code:

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

$("#lab2").text(Str);
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 BranscumWeb Developer

Author

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

Ensure you’re charging the right price for your IT

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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 BranscumWeb Developer

Author

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
Mark BranscumWeb Developer

Author

Commented:
Here is my codepen you can see where I am going http://codepen.io/jsMarko/pen/qrGevG
Mark BranscumWeb Developer

Author

Commented:
The box to the right .bord2 ... is what I am aiming for ...... if you follow me
Mark BranscumWeb Developer

Author

Commented:
Perhaps .... it needs to be put into a new ordered list ... NOTE I dont know just shooting ideas
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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?
Prakash SamariyaIT Professional
Top Expert 2015

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

Open in new window

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

Open in new window

Mark BranscumWeb Developer

Author

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
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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
Prakash SamariyaIT Professional
Top Expert 2015
Commented:
Replace below
$(".bord2").text(Str);

Open in new window

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

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.
Mark BranscumWeb Developer

Author

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
Mark BranscumWeb Developer

Author

Commented:
Julian I will keep in mind the other ways to alter it ...... again much appreciated .... spot on
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.
Mark BranscumWeb Developer

Author

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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
<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 BranscumWeb Developer

Author

Commented:
Thank you works great
Prakash SamariyaIT Professional
Top Expert 2015

Commented:
We are happy to help you. :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial