迭代選擇列表以突出顯示項目，依次突出顯示每個項目

Question

我有以下jQuery方法，它遍歷包含多個選項的選擇列表。我想讓第一行匹配用戶鍵入的文本到名爲MMDCriteria的文本框中。目前，代碼依次選擇並突出顯示每個項目，直到它到達列表的末尾。

$("#MMDCriteria").bind('keypress', function(e) { 
      var code = (e.keyCode ? e.keyCode : e.which); 

      if(code == 13) { //Enter keycode     
       var criteria = $(this).val().toUpperCase(); 
       alert("");     
       $('select#MMD > option').each(function() { 
        var optionValue = $(this).text().toUpperCase(); 

        alert(optionValue.substring(0, optionValue.indexOf(criteria))); 

        if(optionValue.substring(0, optionValue.indexOf(criteria)) > -1) { 
         $(this).attr('selected', 'selected'); 
        } 
       }); 
      }    
     }); 

我剛剛開始使用jQuery，所以原諒冗長。

Answer 1

它突出顯示了多個選項，因爲each函數正在爲選擇列表中的每個選項運行。只要返回false找到第一個匹配選項，就必須跳出循環。修改代碼大致如下：

.. 
var notFound = true; // 1) initialize a shared variable 

$('select#MMD > option').each(function() { 
    .. 
    if(found a match) { 
     .. 
     notFound = false; // 2) update it's value to force exit from loop 
    } 
    return notFound; // 3) keep iterating until notFound is true 
}); 
.. 

或者，使用一個簡單的for循環來保持邏輯清晰。

... 
var options = $('#MMD > option'); 
for(var i = 0; i < options; i++) { 
    if found a match { 
     add "selected" attribute 
     return; // exists the `keypress` function immediately 
    } 
} 
.. 

此外，jQuery的已經規範了event對象，這樣你就不必檢查keyCode或which。該物業將永遠被命名爲which。