Как скрыть/показать div, действующий на вход фильтра ввода

Question

У меня есть список разделов, которые перечислены, и я хочу, чтобы было возможность добавить поле ввода, которое позволит пользователю начать вводить текст, а divs отфильтровываются соответственно

Я пробую код ниже, но он не фильтрует. Это не бросали ошибки либо, так что я не уверен, что делать в этой точке ...

Вот HTML разметка:

<input id="filter" type="text" class="form-control" placeholder="Type here..."> 


<ul id="equipdetails"> 
    <li> 
     <div class="col-lg-8"><label data-equipid="3" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Pega<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="4" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">DOT NET<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="5" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Java<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="6" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">JAVA Script<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="26" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Ruby On Rails<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="27" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">NEW QSS<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
</ul> 

Здесь JS код

$('#filter').keyup(function() 
    { 
      var val = $.trim(this.value).toUpperCase(); 
      $(".mt-checkbox").each(function() 
      { 
        var parent = $(this).parent(), 
          length = $(this).text().length > 0; 
        if (length && $(this).text().search(new RegExp(filter, "i")) < 0) 
        { 
          parent.fadeOut("slow"); 
        } 
        else 
        { 
          parent.show(); 
        } 
      }); 
    }) 

Это моя скрипка

http://jsfiddle.net/cod7ceho/145/

Answer 1

filter в вашей скрипке относится к input с идентификатором filter

Что вам нужно в значении input

Изменить этот

if (length && $(this).text().search(new RegExp(filter, "i")) < 0) 

в

if (length && $(this).text().search(new RegExp($(filter).val(), "i")) 

и он должен Работа.

Answer 2

Вы должны передать переменную val к функции поиска, не существует переменная определена как filter

$(this).text().search(new RegExp(val, "i") 

но можно удалить точки также, траверс до li как вместо немедленного родитель

var parent = $(this).closest('li'), 

Fiddle

Answer 3

Использования indexOf() для поиска значения в тексте как $(this).text().toUpperCase().trim().indexOf(val) < 0

$('#filter').keyup(function() 
    { 

      var val = $.trim(this.value).toUpperCase(); 
      console.log(val); 
      $(".mt-checkbox").each(function() 
      { 
        var parent = $(this).parent(), 
          length = $(this).text().length > 0; 

        if (length && $(this).text().toUpperCase().trim().indexOf(val) < 0) 
        { 
          parent.fadeOut("slow"); 
        } 
        else 
        { 
          parent.show(); 
        } 
      }); 
    }) 

JSFIDDLE

Другой способ использовать тот же метод, который вы используете, и замените фильтр в своем регулярном выражении с Валом, так как ваша потребность послать значение в регулярном выражении не сам объект

$(this).text().search(new RegExp(val, "i")) < 0) 

Кроме того, вы хотите, чтобы удалить точки, как только ваш Filte наших за это исчезать из li и выбрать употребляете $(this).closest('li');

JSFIDDLE

Оба метода работают, Это зависит от того, который вы хотите использовать.