jQuery keypress（）處理程序：管理事件流程

我有一些jQuery代碼，以根據用戶輸入as per a previous question關注<select>下拉列表。那就是：jQuery keypress（）處理程序：管理事件流程

HTML

<select id="poetslist"> 
    <option value="shakespeare" data-initial="WS">William Shakespeare</option> 
    <option value="milton" data-initial="JM">John Milton</option> 
    <option value="keats" data-initial="JK">John Keats</option> 
    <option value="wordsworth" data-initial="WW">William Wordsworth</option> 
    <option value="larkin" data-initial="PL">Phillip Larkin</option> 
</select>

的JavaScript

$("#userlist").keypress(function (e) { 
     initials += String.fromCharCode(e.which).toUpperCase(); 
       // when the relevant initials are typed, select that item 
     $(this).find("option").filter(function() { 
      return $(this).attr("title").toUpperCase().indexOf(initials) === 0; 
     }).first().attr("selected", true); 
     $('#book_results').html(loading_img); // Show 'loading' gif 
       // Then use get_books function to update some HTML on the page with relevant info 
     get_books($(this).find("option").filter(function() { 
      return $(this).attr("title").toUpperCase().indexOf(initials) === 0; 
     }).first().val(), null, null);  
     if (timer) { 
      clearTimeout(timer); 
      timer = null; 
     } 
     timer = setTimeout(function() { 
      timer = null; 
      initials = ""; 
     }, 2000); // Max 2 second pause allowed between key presses 
     return false; 
    });

這是非常有前途的，但我發現，當用戶鍵入如首先選擇'WW'，'威廉莎士比亞'，並且頁面上的所有HTML都會更新爲他，並且只有在幾秒鐘後，下拉才能「趕上」並更新爲「威廉華茲華斯」。

我敢肯定，這是我的錯，沒有正確處理事件的流程，但任何人都可以提出解決方案？注：我不能保證每個項目都有兩個首字母縮寫。

感謝您幫助JavaScript新手！

來源

2011-01-24 AP257

我不知道我知道你想要什麼，我敢肯定，我聽不懂的代碼，所以我無論如何回答，希望它會幫助你解決問題...

我寫了一個小代碼，它會完成你想要的第一件事：選擇寫入元素。

<body> 
    <input type="text" id="userlist" /> 
    <select id="poetslist"> 
     <option value="shakespeare" data-initial="WS">William Shakespeare</option> 
     <option value="milton" data-initial="JM">John Milton</option> 
     <option value="keats" data-initial="JMI">John Keats</option> 
     <option value="wordsworth" data-initial="WW">William Wordsworth</option> 
     <option value="larkin" data-initial="PL">Phillip Larkin</option> 
    </select> 

    <script type="text/javascript"> 
     $("#userlist").keyup(function (e) 
     { 
      var initials = $("#userlist").val().toUpperCase(); 

      if (initials.length < 2) 
       return; 

      $("#poetslist option").each(function() 
      { 
       if ($(this).attr("data-initial") == initials) 
       { 
        SelectOptionEtc($(this)); 
       } 
      }); 
     }); 

     function SelectOptionEtc(optionElement) 
     { 
      $(optionElement).attr("selected", true); 
     } 
    </script> 
</body>

現在文檔：

首先我改變了觸發「KEYUP」。我不喜歡「按鍵」的原因是，目前還不清楚是在事件發生之前還是之後。而且由於「keydown」在你真正寫這封信之前就發生了 - 這對我來說並不好。

第二個，我使用了輸入文本。我可以每次都將這些字母保存在一個變量中，但這是錯誤的，原因有幾個： 1。+ =是你能做的最糟糕的事情。特別是在JS中。特別是如果首字母縮寫可以是4-5個字母。如果有的話，我會使用「.push」。 2.關於刪除？或退格？你應該考慮這些，並刪除用戶希望刪除的信件。對我來說太凌亂了。

三，雖然使用「過濾器」和「發現」和其他所有的jQuery方法是好的，我寧願保持它的簡潔利落，我可以。

第四，你所有的其他代碼應該去一個不同的功能。把它放在同一個地方是......好吧......不是我的風格。

BTW

正如你所看到的，爲了不要做不必要的動作，我把條件說的最小長度爲2個字母。

希望它有幫助， Elad。

My Development Blog

來源

2011-01-24 16:14:18 Devaffair

jQuery keypress（）處理程序：管理事件流程

回答

相關問題