Скрыть не соответствующие параметры в функции поиска с помощью JQuery

Question

У меня есть эта функция поиска для выбора несколько:

var SWAPLIST = {}; 
SWAPLIST.search = function(list, search) { 
    $(list) 
    .children() 
    .prop('selected', false) 
    .filter(function() { 
     if (!search) 
     { 
     return false; 
     } 
     return $(this) 
     .text() 
     .toLowerCase() 
     .indexOf(search.toLowerCase()) > - 1; 
    }) 
    .prop('selected', true) 
}; 

Bound его к этому событию:

$(document).ready(function(){ 
    $('.entitySearch').keyup(function() { 
    var kind = $(this).attr('kind'); 
    var left = '.leftEntities[kind=' + kind +']'; 
    var right = '.rightEntities[kind='+ kind +']'; 

    SWAPLIST.search(left + "," + right, $(this).val()); 
    }); 
}); 

Это является примером моего множественного выбора :

<select class="leftEntities grid5" kind="<?php echo $firstKeyLeft;?>" multiple="multiple" size="10">  
    <option> a </option> 
    <option> ab </option> 
    <option> abc </option> 
    <option> abcd </option>  
</select> 

Это мой поиск вход:

<div class="grid6 marginTop10px"> 
    <input kind="<?php echo $firstKeyLeft;?>" class="entitySearch form-control-static" role="form" type="text" size="25"/> 
    <span class="glyphicon glyphicon-search"></span> 
    <label> Suchen </label> 
</div>   

И теперь я хочу скрыть параметры, которые не совпадают, когда я набираю ключ поиска и, конечно, скрываю их, когда я удаляю или редактирую (чтобы он соответствовал), набранный в ключе поиска.

Здесь оригинального соответствующего PHP и HTML код: http://codepad.org/4CXgkiei

Answer 1

Я изменил свой пример разметки и написал несколько новых JS, чтобы заставить его работать.

Проверьте мой рабочий пример здесь: http://jsfiddle.net/7ZETF/2/

Вот JS из примера:

$(function() { 
    $('input[data-filter="example_select"]').on('keyup', function() { 
     var $select_to_filter = $('[name="' + $(this).attr('data-filter') + '"]'); 
     var $move_hidden_options_to = $('select.hidden_options[for="' + $(this).attr('data-filter') + '"]'); 
     var filter_value = $(this).val(); 
     $select_to_filter.find('option').each(function() { 
      if ($(this).text().indexOf(filter_value) == -1) { 
       $(this).prependTo($move_hidden_options_to); 
      } 
     }); 
     $move_hidden_options_to.find('option').each(function() { 
      if ($(this).text().indexOf(filter_value) !== -1) { 
       $(this).prependTo($select_to_filter); 
      } 
     }); 
    }); 
});