Как отобразить теги 'option' в 'datalist' даже если не совпадают введенные слова?

Question

[sumrakx]

Доброго времени суток. Банальный вопрос - как можно отобразить теги 'option' в в 'datalist', даже если значения не совпадают.
Теги беру из api, можно ли как нибудь с помощью css все же их показать или смириться и делать через ul li?

Comments

[Александр Маджугин]

А зачем?

Answer 1

[Александр Маджугин]

Никак. Это же все обрабатывается браузером как ему заблагорассудится. Не смотря на то что datalist является элементом DOM список который выводится браузером не является таким элементом и соответственно им нельзя никак управлять.

Comments

[sumrakx]

ок спс буду думать в другом направлении

[Александр Маджугин]

sumrakx, для спасибо есть кнопка Отметить как решение ;)
На самом деле вы не ответили зачем вам это - у меня есть подозрение, что на самом деле ваша проблема решается и с помощью datalist. Не хотите ли вы случаем чтобы поиск был по одним строкам, а при выборе вставлялись другие соответствующие им?

[sumrakx]

Александр Маджугин, Доброго времени суток. Изначально задача стояла так, что необходимо на стороне UI отслеживать ввод в input и отсылать в API, которая в свою очередь проверяет введеные слова на соответствия и выдает массив актуальных данных, который необходимо поместить в выпадающий список. Простыми словами datalist может только подставлять данные из массива при полном соответствии а тут получалось, что мне нужно отображать совсем иные данные. Еще позже я заметил проблему что datalist генерируеться в каждом браузере по разному и соответственно разное отображение.

В данный момент задачу уже решил. Если кому поможет я использовал библиотеку

jQuery UI autocomplete

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

Пример кода:

$( "#searchBar" ).autocomplete({
            source: function( request, response ) {
                response(content); // где контент массив валидных результатов из API
            },
            minLength: 0
        })

[Александр Маджугин]

sumrakx, Ну это решалось и с даталист - его вполне можно менять на лету и он будет работать, а содержимое option может отличатья от их value. Так что это работает, и я так делал, но в итоге кстати я тоже отказался. Правда не использовал библиотек, а просто накидал свою реализацию и сделал ui список.