当光标位于输入字段 Javascript 时，使用箭头键在列表中导航

问题描述

我正在为 Smarty Streets 的地址推荐构建逻辑，但我仍然无法使用向上/向下箭头键进行导航。

当光标位于输入字段上并且您显示建议列表时，箭头不起作用。

这是我的代码：

let AddressRecommendation = function () { }

AddressRecommendation.prototype.GetAddressSuggestions = function (authId,errorMessage) {
let httpRequest = new XMLHttpRequest();
let addressRecommendationInputField = document.querySelector(" 
[name=EcomOrderDeliveryAddress]");

if (isElementNotNull(addressRecommendationInputField)) {
    let list = document.createElement("ul");
    addressRecommendationInputField.setAttribute("autocomplete","smartystreets");        
    
    addressRecommendationInputField.addEventListener("keyup",function (){
        if (event.keyCode !== 38 && event.keyCode !== 40) {
            list.innerHTML = "";
            httpRequest.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                   let data = JSON.parse(httpRequest.responseText);
                   showElement(list);
                       
                   if (data.suggestions !== null) {
                       for (let i = 0; i < data.suggestions.length; i++) {
                            let listItem = document.createElement("li");
                            let anchor = document.createElement("a");                        
                           
                            anchor.innerHTML = data.suggestions[i].text;
                            listItem.appendChild(anchor);
                            list.appendChild(listItem);                        
                            AddressRecommendation.SelectAddress(anchor,addressRecommendationInputField,list);
                            AddressRecommendation.Accessibility(anchor,list);
                       }                   
                   }
                   AddressRecommendation.SuggestionList(addressRecommendationInputField,list);
                   AddressRecommendation.HideListIfInputIsEmpty(data.suggestions,list);
                   AddressRecommendation.NoSuggestions(data.suggestions,list,errorMessage);
                }
            }
            httpRequest.open("GET","https://us-autocomplete.api.smartystreets.com/suggest?auth-id=" + authId + "&prefix=" + addressRecommendationInputField.value + "&suggestions=10&geolocate=true",true);
                httpRequest.send();
            }
        });
    }
}

AddressRecommendation.prototype.SuggestionList = function (referenceNode,newNode) {
    referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);
}

 AddressRecommendation.prototype.Accessibility = function (element,inputField,list) {

if (isElementNotNull(element)) {
    let options = document.querySelectorAll(element);
    let counter = 0;
    options[counter].classList.add("selected"); 
    
    element.addEventListener("keyup",function (){
        switch (event.keyCode){
            case 38:
                options[counter].classList.remove("selected");
                counter = counter > 0 ? counter-- : 0; 
                options[counter].classList.add("selected");
                break;
            case 40:
                options[counter].classList.remove("selected");
                counter = counter < options.length-1 ? counter++ : options.length-1; 
                options[counter].classList.add("selected");
                break;
            case 13:
                if (options[counter].classList.contains("selected")) {
                    AddressRecommendation.AddValueAndHideList(element,list);
                }
        }    
    });
  }
}

AddressRecommendation.prototype.SelectAddress = function (clickableElement,list){
        clickableElement.addEventListener("click",function (){
        AddressRecommendation.AddValueAndHideList(clickableElement,list);
    });
}

AddressRecommendation.prototype.AddValueAndHideList = function (clickableElement,list) {
    inputField.value = clickableElement.innerHTML;
    hideElement(list);
}

AddressRecommendation.prototype.HideListIfInputIsEmpty = function (data,list){
    if (data === null){
        hideElement(list);
    }
}

AddressRecommendation.prototype.NoSuggestions = function (data,errorMessage) {
     if (data === null && inputField.value !== "") {
        let noSuggestionsListItem = document.createElement("li");
        noSuggestionsListItem.classList.add("u-italic");
        list.appendChild(noSuggestionsListItem)
        showElement(list);
        noSuggestionsListItem.innerHTML = errorMessage;
    }
}

AddressRecommendation = new AddressRecommendation();

逻辑在 AddressRecommendation.prototype.Accessibility 函数中，所有其他函数都工作正常。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）