कीबोर्ड अनुकूल AJAX खोज - जावास्क्रिप्ट, jquery, सीएसएस

मैंने AJAX खोज को कार्यान्वित किया है जो उदाहरण के समान है यहाँ। इस उदाहरण में, आप देख सकते हैं कि आप खोज परिणामों के बीच स्विच कर सकते हैं TAB कुंजी। मेरे खोज परिणामों में, निम्न प्रारूप में एक तालिका है:

*Client*  *Status*  *Hostname*
<client1>   value     value
<client2>   value     value
<client3>   value     value

Client1, client2, client3 वास्तव में हाइपरलिंक्स हैं और कक्षा में हैं search_result_entry। तो, जब नीचे तीर कुंजी दबाया जाता है, तो मैं ध्यान केंद्रित करना चाहता हूं client1 संपर्क। TAB कुंजी यहां काम करता है, लेकिन तीर कुंजी अधिक सहज हो जाएगी। स्थिति और होस्टनाम में मान क्लिक करने योग्य नहीं हैं। साथ ही, ध्यान दें कि मैं उपयोग कर रहा हूं overflow: auto इसलिए यदि बहुत सारे खोज परिणाम हैं, तो स्क्रॉलबार दिखाई देता है। इस मामले में, टैब कुंजी को दो बार मारने से मुझे पहले खोज परिणाम मिल जाता है।

मैं परीक्षण और त्रुटि कर रहा था और निम्नलिखित कोड की कोशिश की, लेकिन यह काम नहीं किया:

if (e.which == 40){    // 40 is the ASCII for down arrow key
$("#keyword").focusout();
$("#results").focus(function(){
$(this).next("td").focus();
});
}

नीचे तीर कुंजी का उपयोग करके खोज परिणामों में जाने के लिए मैं फोकस कैसे प्राप्त करूं और डाउन / अप तीर कुंजियों का उपयोग करके इसमें नेविगेट कर सकता हूं?

उत्तर:

//Keep track of the focused element
var focusedElement = null;

// update it on focus
$("#results").focus(function(){
focusedElement = this;
});

और कहीं आपके हैंडलर में:

//... code
if (e.which == 40){    // 40 is the ASCII for down arrow key
if(focusedElement) $(focusedElement).next().focus();
else $("#results").somethingToGetYourFirstElementDependingOnYourCode().focus();
}
//... more code

पहला भाग वर्तमान में ट्रैक रखेगाकेंद्रित तत्व (यदि कोई है) और दूसरा भाग केंद्रित तत्व अपडेट करेगा (जो पहले भाग को ट्रिगर करेगा और वर्तमान में केंद्रित तत्व अपडेट करेगा)