ajax için klavye navigasyon açılır

0 Cevap php

Ben önermek Ajax açılan için aşağıdaki kodu kullanıyorum (bazı google ne benzer öneririm). Bu iyi çalışıyor.

[Kaynak]: http://www.dynamicajax.com/ Bu kodun

code in html

<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>

code in javascript

//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 = '';
}

Şimdi ben tuşları yardımıyla açılan listesinde gezinebilirsiniz olmadığını bilmek istiyordu. yani

Aşağı Ok tuşunu kullanarak bir açılır listeyi açın. Bir açılır listeyi açtıktan sonra, kullanıcı Enter tuşu ile bir öğeyi seçin Yukarı ok, Aşağı ok, Home, End, Page Up, Page Down tuşları ile açılan öğeler arasında gezinebilirsiniz. Değerini değiştirmeden listesini kapatmak için, kullanıcı Esc tuşuna basabilirsiniz.

Tüm yukarıda belirtilen özelliklere sahip, olması onun güzel. - Bu mümkün ise.

Ama Up arrow, Down Arrow gereklidir ile naviagting. - Bu 2 için yardıma ihtiyacınız var

Şimdiden teşekkürler!

0 Cevap

etiketler