CODEWITHSUNDEEP
javascriptjqueryhtml
Amara Balakrishna
Amara Balakrishna

Reputation: 31

search in div with group of li elements

I have a <div> with group of <li> elements and I want to filter the elements. Suppose there are 1 to 10 <li> elements. If I enter 5 in the search box the <div> should show only 5. When I remove the number 5 it should show all <li> elements.

<input type="text">
  <div>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li‌​>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </div>

Upvotes: 0

Views: 150

Answers (5)

Sharique Hussain Ansari
Sharique Hussain Ansari

Reputation: 1456

Try like this:-

<input type="text" id='text1' onblur="myFunction()">
<div>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
 </ul>
</div>

<script>
function myFunction() {
var txt =$("#text1").val();
$("ul li").each(function(){
if(txt.length>0){   
 if($(this).html() == txt){
  $(this).show();
 }else{
  $(this).hide();
 }
}else{
$(this).show();
}
});
}
</script>

Upvotes: 0

Secret
Secret

Reputation: 3348

$('input').keyup( function(){
    if($(this).val() == ''){
        $('li').css('display', 'visible')
    } else {
        $('li').css('display', 'none')
        $('li:eq('+($(this).val()-1)+')').css('display', 'visible')
    }
});

<!-- html -->
<input type="text">
    <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </div>

Upvotes: 0

Anil kumar
Anil kumar

Reputation: 136

    $(document).ready(function() {
      $('.text').keyup(function(){
       if( $(this).val()!= ''){  
            var valThis = $(this).val().toLowerCase();
            $('.number li').each(function(){               
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) !== -1) ? $(this).contents().get(0).nodeValue : $(this).hide(); 
         });       
         }else{
            $('.number li').show();       
         }   

     }); 
    });
    /*-------------- Html ----------------- */
   <div class="number">
    <ul>
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li>  
        <li>5</li>     
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
        <li>9</li> 
        <li>10</li>  
    </ul>
</div>
<input name="" class="text" type="text" />

Upvotes: 1

Jackson
Jackson

Reputation: 149

While creating the li create the id with the no's like testLi_1, testLi_2 ...... And create the element with same class testLi.

By default show all the li by 

$('.testLi').show();

When user enters the value create a for loop and iterate the element and display in below way 

var userInput = $("inputId").value(); //User Enter value 
for(var i=1; i<= userInput ; i++){
   $('#testLi_'+i).show();
}

Upvotes: 0

JuaRoAl
JuaRoAl

Reputation: 201

I don't know in what are you working because your explanation doesn't provide too much info, but maybe is better if you use a table instead of a list and dataTables jquery pluging which has a live search of the table content

Upvotes: 0

Related Questions