2015-01-04 208 views
1

我創建了一個搜索過濾器,用於分離與用戶輸入內容不匹配的選項。無法選擇JQuery(Mobile)/ JavaScript Select選項

例如,列表中包含:「hello」,「goodbye」,「halo」,如果我輸入「h」,那麼它只會顯示「hello」和「halo」。

我面臨的問題是,如果有一個選項,我不能選擇它,但如果有多個選項,我可以。

這裏是(完整的代碼)的jsfiddle:JSFIDDLE LINK

重現問題:進入「另一個」輸入框,並嘗試選擇「做另一個」在選擇菜單選項。

如果有多個選項,我可以選擇任何選項,所以如果我輸入單詞「do」,那麼我可以選擇其中的任一選項。

var probOptions = $("#problem>option"); 

function searchFilter() { 
    $("#searchInput").change(function() { 
     var searchString = $(this).val().toLowerCase(); 
     $("#problem").empty().append(probOptions); 
     $("#problem>option").each(function() { 
      var text = $(this).text().toLowerCase(); 
      if (text.indexOf(searchString) <= -1) { 
       $(this).detach(); 
       // THE LINE BELOW FIXES THE PROBLEM (THE LINE BELOW IS NEWLY ADDED) 
       $("#problem").selectmenu("refresh"); 
      } 

     }); 

    }); 

} 

searchFilter(); 
+0

你使用jQuery Mobile框架嗎? – Omar 2015-01-04 16:38:22

+0

嗨奧馬爾,是的,我使用JQuery Mobile。 – Newtonic 2015-01-04 17:19:50

+0

我已經設法解決這個問題,請檢查我的答案,如果你遇到類似的問題,我有。感謝您花時間看看我的問題。 – Newtonic 2015-01-04 17:40:47

回答

0

我自己設法解決了這個問題。

顯然,對於JQuery移動,你需要刷新列表,但你不需要標準的JQuery。

這裏的解決方案(其中#problem是選擇菜單的ID):

$("#problem").selectmenu("refresh"); 

希望這有助於任何人有這個問題。