Как отобразить все параметры элемента списка HTML5, когда в поле ввода нет текста? - PullRequest
Новая
       23

Как отобразить все параметры элемента списка HTML5, когда в поле ввода нет текста?

0 голосов
/ 15 апреля 2019

Я хочу отобразить все опции, доступные в элементе списка данных, когда длина ввода текста равна 0. Я пытался вызвать событие нажатия клавиши со стрелкой вниз, но каким-то образом это переопределяется каждый раз. Я где-то читал, что при фокусировке ввода при нажатии клавиши со стрелкой вниз раскрывающийся список показывает все варианты. Пытался имитировать это поведение с помощью этого кода Это поле ввода, к которому параметры добавляются динамически: 

<input class="chosen-select-zone-start-end grey-placeholder" onkeyup="showHint(event, this.value)" id="start-zone-flowInput" list='start-zone-list' placeholder="Select Start Zone"  autocomplete="on" />

function clickevent(){                

         var e = $.Event("keydown");
         e.which = 40;
         e.keyCode = 40;
         console.log("evetn", e);
         $("#start-zone-flowInput").focus().trigger(e);     
         // $("#start-zone-flowInput")
         e.preventDefault();
    }

function showHint(event, val) {
        console.log(val, val.length);
        if(val.length === 0) {
            console.log("firing event .....");
            clickevent();
        }
    }

1 Ответ

0 голосов
/ 15 апреля 2019

Вы можете «отобразить» значения параметров, когда ввод получает фокус, как в этом фрагменте. (Из вашего кода похоже, что вы просто хотите войти в каждый из них.)

В качестве альтернативы событию focusin, вы можете запустить функцию для события input - или, если вы хотите запускать ее при каждом нажатии клавиши, keyup тоже подойдет мне (например: if(event.code == "ArrowRight") - но, как вы обнаружили, существует исключение для ArrowDown и ArrowUp, которые имеют поведение по умолчанию (в любом случае в Chrome), которое я не смог предотвратить с помощью event.preventDefault(). 

const options = document.querySelectorAll("#start-zone-list > option");
document.addEventListener("focusin", logOptions);

function logOptions(event){
  if(event.target.id == "start-zone-flowInput" && event.target.value == ""){
    for(let option of options){
      console.log(option.innerHTML);
    }
  }
}
<input class="chosen-select-zone-start-end grey-placeholder" id="start-zone-flowInput" list='start-zone-list' placeholder="Select Start Zone"  autocomplete="on" />
<datalist id="start-zone-list">
  <option>a</option>
  <option>b</option>
</datalist>
...