Mark Branscum
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
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);
Here is some sample code that demonstrates the concept
Working sample here
<ul id="hide-names">
<li>Danny Partridge</li>
<li>Metisula Grinswald</li>
<li>Lionla Pi</li>
<li>Dantrisky Pinewood</li>
</ul>
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>
Working sample here
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
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);
});
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
BTW use <br/> instead of \n if you want a new line in the html
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
It will take me a bit to see how to put this in my code to test ..... be back asap
ASKER
Here is my codepen you can see where I am going http://codepen.io/jsMarko/pen/qrGevG
ASKER
The box to the right .bord2 ... is what I am aiming for ...... if you follow me
ASKER
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';
WithStr += $(this).text() + '<br/>';
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
Or
You can have it that as you type items are removed from left and added to right.
Post back with exact requirements.
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
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
ASKER
Julian I will keep in mind the other ways to alter it ...... again much appreciated .... spot on
You are welcome.
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
this is what I had to count
var rCount = $("li:contains('" + sName + "')").length;
$("#lab2").text(sName + " " + rCount);
<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>
ASKER
Thank you works great
We are happy to help you. :)
var Str='';
$("li:contains('" + sName + "')").each(function(){
Str+=$(this).text()
});
$("#lab2").text(Str);