jQuery keypress() 핸들러 : 이벤트 흐름을 관리합니다.

as per a previous question을 기반으로 <select> 드롭 다운에 집중할 수있는 jQuery 코드가 있습니다.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>

자바 스크립트

$("#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', 'William Shakespeare'가 먼저 선택되고 페이지의 모든 HTML이 업데이트되어 2 초 후에 드롭 다운이 'catch up'되고 'William Wordsworth'에 대한 업데이트가 수행됩니다.

나는 이것이 이벤트의 흐름을 정확하게 처리하지 못하는 것에 대한 내 잘못이라는 것을 확신하지만 누구나 수정 제안을 할 수 있습니까? N.B. 모든 상품에 두 개의 이니셜이 있음을 보장 할 수는 없습니다.

자바 스크립트 초보자를 도와 주셔서 감사합니다! ...

출처

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"에 트리거를 변경했습니다. 내가 "keypress"를 좋아하지 않는 이유는 이벤트가 해고되기 전후에 그것이 명확하지 않다는 것입니다. 그리고 "keydown"이 실제로 편지를 쓰기 전에 발생하기 때문에 그것은 나에게 좋지 않습니다.

두 번째 입력 텍스트를 사용했습니다. 변수에 매번 글자를 저장할 수 있지만 몇 가지 이유 때문에 잘못된 것입니다. 1. + = 할 수있는 최악의 경우입니다. 특별히 JS에서. 특별히 이니셜이 4-5 자일 수 있다면. 무엇이든, 나는 ".push"를 사용할 것입니다. 2. 삭제는 어떻게됩니까? 또는 백 스페이스? 당신은 이것을 고려하고 제거하고 싶은 편지를 제거해야합니다. 너무 지저분 해. "필터"와 "검색"이 모든 다른 jQuery를 방법이 좋은를 사용하지만

는 세 번째은, 내가 할 수있는만큼 간단하고 깔끔한 유지하는 것을 선호합니다.

네 번째 다른 모든 코드는 다른 기능으로 이동해야합니다. 같은 장소에 모두 보관하는 것은 ... 음 ... 내 스타일이 아닙니다. 당신이 볼 수 있듯이

은 BTW

, 불필요한 행동을하지 않기 위해, 나는 최소 길이는 2 글자이다라는 조건을 배치.

희망, 엘라드.

My Development Blog

출처

2011-01-24 16:14:18 Devaffair

jQuery keypress() 핸들러 : 이벤트 흐름을 관리합니다.

답변

관련 문제