Как сохранить «список автозаполнения» видимым после нажатия внутри виджета ввода с помощью Materialize? - PullRequest
Новая
       38

Как сохранить «список автозаполнения» видимым после нажатия внутри виджета ввода с помощью Materialize?

0 голосов
/ 26 июня 2019

Я сделал input-widget с автозаполнением, который можно открыть при нажатии на виджет.Проблема, с которой мне нужна помощь, если предположить, что список автозаполнения открыт, заключается в том, как можно щелкнуть внутри виджета ввода один или несколько раз без закрытия списка автозаполнения, прежде чем будет сделан выбор.

Из моего исследования я нашел похожий вопрос, но ответил в jQuery .(Я хотел бы, если возможно, избегать использования jQuery)

HTML 

 <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="SimpleInput" class="autocomplete validate" required>
          <label for="SimpleInput">AutocompleteSimple</label>
        </div>
      </div>
    </div>
  </div>
</div> <!-- CLOSE CONTAINER -->

Javascript 

var instances = M.Autocomplete.init(elems, 
  {data: 
     {"Apple": null,
    "Microsoft": null,
    "Google": null},
    minLength: 0});

Ожидание

Я ожидаю, что смогу перемещать текстовый курсор с помощью мыши / сенсорной панели, щелкая мышью в нужной позиции, не закрывая список автозаполнения.

Фактический результат

Когда я добавляю, например, "o" в виджет ввода, а затем добавляю "G" перед ним, я не могу щелкнуть текстовый курсорв определенное место без закрытия списка автозаполнения.

Код, который я использую, также можно увидеть в CodePen

...