키보드 탐색 아약스 드롭 다운

아약스 드롭 다운 제안에 다음 코드를 사용하고 있습니다 (Google과 비슷한 점이 일부 있습니다). 그것은 잘 작동하고 있습니다.키보드 탐색 아약스 드롭 다운

코드 HTML에서

내가 탐색 할 수 있는지 알고 싶어 이제

//Gets the browser specific XmlHttpRequest Object 
function getXmlHttpRequestObject() { 

     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
    return new XMLHttpRequest(); 
} else if(window.ActiveXObject) { 
      // code for IE6, IE5 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
} else { 
    alert("It's about time to upgrade your browser. don't you think so?"); 
} 
} 

//Our XmlHttpRequest object to get the auto suggest 
var searchReq = getXmlHttpRequestObject(); 

//Called from keyup on the search textbox. 
//Starts the AJAX request. 
function searchSuggest() { 
if (searchReq.readyState == 4 || searchReq.readyState == 0) { 
    var str = escape(document.getElementById('txtSearch').value); 
    searchReq.open("GET", 'searchSuggest.php?search=' + str, true); 
    searchReq.onreadystatechange = handleSearchSuggest; 
    searchReq.send(null); 
} 
} 

//Called when the AJAX response is returned. 
function handleSearchSuggest() { 
if (searchReq.readyState == 4) { 
    var ss = document.getElementById('search_suggest') 
    ss.innerHTML = ''; 
    var str = searchReq.responseText.split("\n"); 
    for(i=0; i < str.length - 1; i++) { 
    //Build our element string. This is cleaner using the DOM, but 
    //IE doesn't support dynamically added attributes. 
    var suggest = '<div onmouseover="javascript:suggestOver(this);" '; 
    suggest += 'onmouseout="javascript:suggestOut(this);" '; 
         suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; 
    suggest += 'class="suggest_link">' + str[i] + '</div>'; 
    ss.innerHTML += suggest; 
    } 
} 
} 

//Mouse over function 
function suggestOver(div_value) { 
div_value.className = 'suggest_link_over'; 
} 
//Mouse out function 
function suggestOut(div_value) { 
div_value.className = 'suggest_link'; 
} 

//Click function 
function setSearch(value) { 
document.getElementById('txtSearch').value = value; 
document.getElementById('search_suggest').innerHTML = ''; 
}

자바 스크립트

<html lang="en-US"> 
    <head> 
     <style type="text/css" media="screen"> 
      body { 
       font: 11px arial; 
      } 
      .suggest_link { 
       background-color: #FFFFFF; 
       padding: 2px 6px 2px 6px; 
      } 
      .suggest_link_over { 
       background-color: #3366CC; 
       padding: 2px 6px 2px 6px; 
      } 
      #search_suggest { 
       position: absolute; 
       background-color: #FFFFFF; 
       text-align: left; 
       border: 1px solid #000000; 
      } 
     </style> 
     <script language="JavaScript" type="text/javascript" src="ajax_search.js"></script> 
    </head> 
    <body> 
     <h3><a href="http://www.DynamicAJAX.com" style="color: #000000; text-decoration: none;">Simple AJAX Search Suggest</a></h3> 


     <form id="frmSearch"> 
      <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest(this.value);" autocomplete="off" /> 
      <!-- <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />--> 
      <div id="search_suggest"> 
      </div> 
     </form> 
    </body> 
</html>

코드 열쇠의 도움으로 드롭 다운리스트.

아래쪽 화살표 키를 사용하여 드롭 다운 목록을 엽니 다. 드롭 다운 목록을 연 다음 사용자는 위쪽 화살표, 아래쪽 화살표, 홈, 끝, 페이지 위로, Page Down 키를 사용하여 드롭 다운 항목 사이를 탐색 한 다음 Enter 키를 사용하여 항목을 선택할 수 있습니다. 값을 변경하지 않고 목록을 닫으려면 사용자가 Esc 키를 누를 수 있습니다.

위의 모든 기능을 갖추면 아주 좋습니다. - 가능한 경우에만.

으로 naviagting 위쪽 화살표, 아래쪽 화살표이 필요합니다. -이 도움이 필요합니다.

미리 감사드립니다.

출처

2010-11-24 satya

텍스트 입력에 자동 완성 옵션이 나타나는 것을 의미합니까? 이 경우 keypress에 대한 옵션을 설정하고 아래쪽 화살표이면 $ (this) 요소에 대해 "mouse_out"과 현재 수행하는 것과 동일한 작업을 수행하고 그 아래에는 "mouse_over"를 수행합니다. 위쪽 화살표는 위의 것과 동일한 것입니다.

먼저 각 div에 ID가 필요하며 순차적으로 만듭니다. 그럼 당신은 내가 들어오는 키와보고 요소에 대한 인수를 엉망 수도 키 누름

for(i=0; i < str.length - 1; i++) { 
    //Build our element string. This is cleaner using the DOM, but 
    //IE doesn't support dynamically added attributes. 
    var suggest = '<div onmouseover="javascript:suggestOver(this);" '; 
    suggest += 'onmouseout="javascript:suggestOut(this);" '; 
        suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; 

        suggest += 'onkeypress="javascript:keyPressFunc(k,this);' //THIS IS NEW 
        suggest += 'id="item"+i'; //THIS IS THE NEW LINE TO ADD 

    suggest += 'class="suggest_link">' + str[i] + '</div>'; 
    ss.innerHTML += s 
} 

function keyPressFunc(k, comesFrom) 
{ 
    keyIn = k.keyCode; 
    suggestOut(this); 
    getsFocusId = "item" + 39-keyIn //38 is up arrow, 40 is down 
    suggestOver(document.getElementById(getFocusId)); 
}

에 대한 기능을 추가 할 수 있지만 아이디어를 이잖아. 값을 얻기 위해, 키를 누를 때 이벤트를 추가

1)이 div의
2)의 각) 고유 (순차 아이디의 추가 .keyCode을 사용하여 화살표가 최대 : 몇 가지 세부 사항이없는 경우에도 폭 넓은 스트로크는 소리입니다 40 down은 38이고 13 esc는 27입니다 page up, pagedown, end, home are 33-36
3) keypress를 취하는 div의 경우 suggestOut에 대해 현재하고있는 일을해야합니다. 당신은 현재 무엇을 위해 suggestOver를 위해 또 다른

나는 꽤 많은 시간에 바닐라 자바 스크립트에서 이런 식으로 아무것도하지 않았으니 그래서 왜 내가 퍼지. 여기서 jQuery의 이점을 누릴 수있을 것입니다.

PS - get jQuery. 그런 다음이 이벤트를 정말 쉽게 설정할 수 있습니다.

$(".suggest_link").keypress(function(k) {.....

출처

2010-11-24 15:02:06

+1 감사합니다 :) 이것은 내가 찾고있는 것입니다! – satya

키보드 탐색 아약스 드롭 다운

답변

관련 문제