NikanDalvand NikanDalvand - 4 months ago 6x
Javascript Question

Search Items using jquery

I'm trying to create a search using jQuery

$(function() {
var opts = $('#content li').map(function() {
return [[this.value, $(this).text()]];

var rxp = new RegExp($('#someinput').val(), 'i');
var content = $('#content').empty();
opts.each(function() {
if (rxp.test(this[1])) {
content.append($('</li>').attr('value', this[0]).text(this[1]));

<input type="text" id="someinput" placeholder="Search" name="search" >

<section id="content">
<ul id="newSonglist">
<!-- items here -->

Items look like this:

<li onclick="myControl.selectList(this,1)">
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
<div class="textBox">
Chris Brown Grass Aint Greener
<p>Sent by Nikan</p>

When I search
Chris Brown
it will remove all of the contents and it does not exclude the
Chris Brown
. Can you guys help me make it work? Thanks.


Your code works fine except for your new li creation. You are creating the li element using $('</li>') instead of $('<li>') (Note the /)

// You wrote </li> instead of <li>
content.append($('<li>').attr('value', this[0]).text(this[1]));

See this fiddle