Как отключить пользовательский ввод для материализации автозаполнения

Question

По сути, я хочу, чтобы пользователь мог выбирать только из заданных значений.

Например, когда пользователь выбирает или щелкает внутри текстового поля, он должен отображать некоторые из значений (например, Microsoft и Google), а затем он должен иметь возможность выбрать один из них или ввести a, а затем выбрать яблоко, но ни при каких обстоятельствах он не сможет вводить или выбирать все, что не входит в данные / значения.

CodePen: https://codepen.io/textech/pen/WNvrLMp

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },

    });
  });

Answer 1

Передача 'minLength: 0' в инициализацию вызывает опции, как только вы щелкаете в текстовом поле:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      minLength: 0,

    });
  });

Forked codepen:

https://codepen.io/doughballs/pen/XWbXQZY

Документация:

https://materializecss.com/autocomplete.html#options

РЕДАКТИРОВАТЬ

Я добавил слушатель автозаполнения (jQuery, но вы можете при необходимости переделать) - он подключается к экземпляру, чтобы проверить 'count', то есть сколько опций в настоящее время возвращается. Если это 0 - ie нет соответствия - мы очищаем автозаполнение.

Я обновлю код ручки: D

$('#autocomplete-input').on('keyup',function(){
  console.log('keyup')
   if ( instances[0].count === 0 ) {
     console.log('no matches');
     $('#autocomplete-input').val('');
   }
})