修改後無法搜索多選擇

Question

我在頁面中有2個多重選擇，並且我需要在保留搜索能力的同時將某些選項先移到第二位。

的問題是，當我使用搜索輸入，它的選擇還原到其原來的選項...

這裏是jQuery的搜索功能：

jQuery.fn.filterByText = function(textbox) { 
    return this.each(function() { 
     var select = this; 
     var options = []; 
     $(select).find('option').each(function() { 
      options.push({value: $(this).val(), text: $(this).text()}); 
     }); 
     $(select).data('options', options); 

     $(textbox).bind('change keyup', function() { 
      var options = $(select).empty().data('options'); 
      var search = $.trim($(this).val()); 
      var regex = new RegExp(search,"gi"); 

      $.each(options, function(i) { 
       var option = options[i]; 
       if(option.text.match(regex) !== null) { 
        $(select).append(
         $('<option>').text(option.text).val(option.value) 
        ); 
       } 
      }); 
     }); 
    }); 
}; 

這裏是JS提琴：http://jsfiddle.net/C2XXR/！

* 我認爲，問題出在選擇的變量，但對如何解決它*

由於不知道！

Answer 1

我已經更新了小提琴。 http://jsfiddle.net/C2XXR/2/

我已經更新了左右轉移的代碼。你必須改變選項數組本身得到的過濾器，在dom中添加它們將不起作用。在更改後的代碼中，一個問題是我們從右向左或從左向右添加它將被添加到目標選擇的最後位置。

請檢查並讓我知道這是你想要的。

下面是主要改變的功能。稍後，您可以創建一個我認爲常用的功能。代碼可以進一步優化。

$('[id^=\"btnRight\"]').click(function (e) { 

     var selected = $(this).parent().prev('select'); 
     var target = $(this).parent().next('select'); 

     target.find('option[value="999"]').remove() 

     var options = selected.data('options');  
     var selectedVal = selected.find('option:selected').val()  

     var tempOption = []; 
     $.each(options, function(i) { 
       var option = options[i]; 
       if(option.value != selectedVal) { 
        tempOption.push(option); 
       } 
      }); 

     var targetOptions = target.data('options'); 
     targetOptions.push({value: selected.find('option:selected').val(), text: selected.find('option:selected').text()});   
     target.data('options', targetOptions); 

     selected.find('option:selected').remove().appendTo('#isselect_code'); 
     selected.data('options', tempOption); 
    }); 

    $('[id^=\"btnLeft\"]').click(function (e) { 

     var selected = $(this).parent().next('select'); 
     var target = $(this).parent().prev('select'); 

     var options = selected.data('options');  
     var selectedVal = selected.find('option:selected').val()  

     var tempOption = []; 
     $.each(options, function(i) { 
       var option = options[i]; 
       if(option.value != selectedVal) { 
        tempOption.push(option); 
       } 
      }); 
     if(tempOption.length == 0) 
     { 
      // add 999 here 
     } 

     var targetOptions = target.data('options'); 
     targetOptions.push({value: selected.find('option:selected').val(), text: selected.find('option:selected').text()});   

     target.data('options', targetOptions); 


     selected.find('option:selected').remove().appendTo('#canselect_code');; 
     selected.data('options', tempOption); 
    }); 

Answer 2

與您的代碼的問題是，你點擊btnRight或btnLeft你的每個select的選項集合不更新，經過這麼點擊每個按鈕後，嘗試打電話給你filterByText，如下所示：

$('[id^=\"btnRight\"]').click(function (e) { 
     $(this).parent().next('select').find('option[value="999"]').remove() 
     $(this).parent().prev('select').find('option:selected').remove().appendTo('#isselect_code'); 
     $('#canselect_code').filterByText($('#textbox'), true); 
     $('#isselect_code').filterByText($('#textbox1'), true) 

    }); 

    $('[id^=\"btnLeft\"]').click(function (e) { 

     $(this).parent().next('select').find('option:selected').remove().appendTo('#canselect_code'); 
     $('#canselect_code').filterByText($('#textbox'), true); 
     $('#isselect_code').filterByText($('#textbox1'), true) 
});