Datalist не отображается должным образом в Edge и IE11

Question

В моем. html Я должен назначить какое-то значение и список данных с 2 вариантами:

• Первый: взять значение моего ввода
• второе: где я * ng для списка значений.

<input autoComplete="off" 
type="text" 
(change)="methodWhenIChangeMyValue()">
      <datalist id="{{row.MYOBJECT}}">
            <option value="{{value}}">{{value}}</option>
            <option *ngFor="let i of arrayToParse[row.MYOBJECT]" value="{{i.MYOBJECTID}}">
                    {{i.MYOBJECTID}}</option>
       </datalist>
</input>

В Firefox и Chrome мой список отображается нормально, но в Edge / IE11 отображается только один элемент. Все данные загружены, но мне нужно перейти в мой вариант, чтобы показать их. Наконец, когда у меня есть все мои элементы (после навигации), если я ищу элемент более конкретно c, отображается серый блок. Как я могу это исправить?

Все мои действия для не упоминаются в этом фрагменте.

В начале отображается только один элемент:

При поиске более точного c значения отображается серый блок:

Answer 1

Это похоже на ошибку в MS Edge ( Microsoft Edge 44.17763.1.0, Microsoft Edge HTML 18.17763 ), я смог воспроизвести его, выполнив следующие шаги:

1. Запустите следующую демонстрацию: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
2. Введите слово «Шоколад» буква за буквой в поле «Выберите свой вкус», затем сотрите все символы, один за другим До тех пор, пока ничего не осталось. Появляется разбитый список данных под входом, как на скриншотах выше.

Answer 2

Datalist поддерживается не всеми браузерами и не обрабатывается одинаково. Я рекомендую вам переключиться на что-то типа flexselect: https://rmm5t.github.io/jquery-flexselect/

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