AUTO-SUGGESTION 키보드 사용

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Ajax Auto Suggest</title> 
     <script type="text/javascript" src="jquery-1.2.1.pack.js"></script> 
     <script type="text/javascript"> 
     var stringcount = 0; 
     var st = ""; 
     var vv = "f"; 
     function lookup2(e,inpstring) 
     { 
      lookup1(e.keyCode,inpstring); 
     } 
     function lookup1(j,inputstring) 
     { 
      var x= inputstring.length; 
      st = inputstring ; 
      if (inputstring.charAt(parseInt(x,10)-1) == " ") 
      { 
       stringcount = stringcount + 1; 
      } 
      else 
      { 
       var mySplitResult = inputstring.split(" "); 
       var stringtemp = "" ; 
       var w = 0; 
       for (w =0 ; w < stringcount ;w++) 
       { 
       stringtemp = stringtemp+ " "+ mySplitResult[w]; 
       } 
       st = stringtemp; 
       lookup(mySplitResult[stringcount],inputstring); 
      } 
      } 
      function lookup(inputString,i) { 
       if(inputString.length == 0) { 
        // Hide the suggestion box. 
        $('#suggestions').hide(); 
       } else { 
        $.post("rpc.php", {queryString: ""+inputString+"" }, function(data){ 
         if(data.length >0) { 
          $('#suggestions').show(); 
          $('#autoSuggestionsList').html(data); 
         } 
        }); 
       } 
      } // lookup 

      function fill(thisValue) { 
       $('#inputString').val(st.substring(1,st.length)+" "+thisValue); 
       setTimeout("$('#suggestions').hide();", 200); 
      } 
    </script> 
     <style type="text/css"> 
      body { 
       font-family: Helvetica; 
       font-size: 11px; 
       color: #000; 
      } 
      h3 { 
       margin: 0px; 
       padding: 0px; 
      } 
      .suggestionsBox { 
       position: relative; 
       left: 30px; 
       margin: 10px 0px 0px 0px; 
       width: 200px; 
       background-color: #212427; 
       -moz-border-radius: 7px; 
       -webkit-border-radius: 7px; 
       border: 2px solid #000; 
       color: #fff; 
      } 
      .suggestionList { 
       margin: 0px; 
       padding: 0px; 
      } 
      .suggestionList li { 
       margin: 0px 0px 3px 0px; 
       padding: 3px; 
       cursor: pointer; 
      } 
      .suggestionList li:hover { 
       background-color: #659CD8; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <form> 
       <div>Type your county here:<br /> 
        <input type="text" size="30" value="" id="inputString" onkeyup="lookup2(event,this.value);" onblur="" /> 
       </div> 
       <div class="suggestionsBox" id="suggestions" style="display: none;"> 
        <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> 
        <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div> 
       </div> 
      </form> 
     </div> 
    </body> 
</html>

이것은 내가 사용하고있는 코드입니다. 자동 제안 상자는 원하는 옵션을 클릭하여 액세스 할 수 있습니다. 키보드의 위/아래 키를 사용하여 옵션을 스크롤하고 Enter 키를 사용하여 옵션을 선택할 수 있습니까?AUTO-SUGGESTION 키보드 사용

출처

2011-06-10 rajat

코드를 다시 포맷하십시오. 추가 간격을 모두 읽지 않아도됩니다. – Oded

가능하면 http://jsfiddle.net을 사용하십시오. – pixelfreak

서버 측 ajax 엔드 포인트가 HTML 순서없는 목록을 리턴하고 이것이 suggestionList div에 붙여 넣어 진 것처럼 보입니다 (정말 중요한 코드를 인용하지 않았기 때문에). 그건 내 가정 일세. 당신의 CSS는 hover pseudo-selector를 허용하여 마우스 지원이 좋아 보인다.

키보드 지원의 경우 keypress 이벤트 (아마도 document)에 대한 이벤트 처리기를 추가해야합니다. 제안 상자가 표시되면 처리기를 추가하고 해 제할 때 제거하십시오.

이벤트 핸들러는 위쪽 화살표 키와 아래쪽 화살표 키를 추적하고 입력해야합니다. 현재 선택되어있는 li 요소에서 특수 클래스 (또는 아마 id)를 추가하고 제거해야합니다. 즉, 스크롤 할 요소의 수와 현재 강조 표시된 요소를 추적해야합니다. 따라서 아래쪽 화살표 키가 보이면 현재 인덱스에 값을 추가하십시오 (마지막 값인 경우 키 무시). 방금 남긴 li 요소에서 특수 클래스를 제거하고 새 요소에 추가하십시오 (CSS에서 클래스의 스타일을 분명히 지정하십시오). 엔터 키를 누르면 어떤 요소가 선택되었는지 알 수 있으므로이를 반환하거나 원하는 것을 수행하십시오.

출처

2011-06-11 01:55:30 jmbucknall

AUTO-SUGGESTION 키보드 사용

답변

관련 문제