Тег HTML5 datalist не заполняется в Safari

У меня есть тег datalist, который позволяет моим пользователям иметь предложение. Однако я заметил, что эта функция не поддерживается в сафари. Есть ли способ обхода проблемы?

Вот мой код - я на самом деле заполняю мои значения с помощью метода ajax, но это то, как он будет выглядеть после его заполнения:

<datalist id="languages">
    <option value="HTML">
    <option value="CSS">
    <option value="JavaScript">
    <option value="Java">
    <option value="Ruby">
    <option value="PHP">
    <option value="Go">
    <option value="Erlang">
    <option value="Python">
    <option value="C">
    <option value="C#">
    <option value="C++">
</datalist>

Search: 
<input type="text" list="languages">

У меня также есть скрипка здесь

Ответы

Ответ 2

Обходной путь к списку HTML5-данных для Safari и/или более старых браузеров

Обновление, январь 2017

И iOS, или настольный Safari по-прежнему не поддерживают datalist, и пока нет никаких признаков этого изменения. Так что это взломать, заставляя его обойти проблему. Крис Койер также участвовал в polyfill в 2011 году. Давайте надеяться, что Safari в будущем реализует существующую Рекомендацию W3C.

Исходное сообщение:

Вы можете использовать элемент select внутри datalist и дублировать значения тега option виде читаемого текста в них. Например:

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <style>
    input[list="languages"] {
      width: 12em;
      border: none;
      background: #eee;
    }
    select {
      width: 12em;
      margin: 0;
      margin-left: -12.75em;
    }
  </style>
</head>
<body>

Choose: <input type="text" list="languages">
<label for="languages">
  <datalist id="languages">
    <select>
      <option value="JavaScript">JavaScript</option>
      <option value="Haskell">Haskell</option>
      <option value="Ruby">Ruby</option>
      <option value="Go">Go</option>
      <option value="Python">Python</option>
      <option value="etc">etc</option>
    </select>
  </datalist>
</label>
</body>
</html>

Поддержка браузеры будут просто отображать datalist, Safari и старые браузеры покажут option innerHTML тегов. У тега input есть граница по умолчанию, которая в Safari выглядит плохо за элементом select, но с небольшим стилем, как показано в этом примере, вы можете обойти отсутствие поддержки Safari и сохранить тот же функциональный вид. Нет необходимости в Javascript и/или polyfills.

Ответ 3

Я понимаю его немного поздно, но для тех, кто хочет решение, которое имитирует datalist на Safari, вместо того, чтобы заменять его на выбор:

https://github.com/Fyrd/purejs-datalist-polyfill

В основном, коротко и ясно .js и .css, которые вы можете включить в свой html, и это приводит к тому, что связанные с данными входы со стороны данных ведут себя одинаково в Safari и Opera mini, как в браузерах Chrome, Firefox и Android.

Ответ 4

Во-первых, спасибо Джорджу за сценарий, который снова работает сегодня. Для тех, у кого возникают проблемы из-за того, что ваши опции отображаются в верхнем левом углу (например, iamse7en), вы должны изменить эти строки в datalist.polyfill.js:

56:

document.body.appendChild( fakeList ); document.getElementById("myIdDiv").appendChild( fakeList );

Потому что в примере на проекте github это был только один div в теле, так что это не было проблемой.

110:

input.value = item.innerText; input.value = item.innerHTML;

Нажать в любом месте на элемент, а не только на текст.

И, наконец, добавьте <script src="/static/js/datalist.polyfill.js"></script> в ваш HTML файл, но не в версию datalist.polyfill.min.js

Ответ 5

В дополнение к тому, что сказал Mianto относительно проблемы iamse7en, для того, чтобы связать ваш datalist с динамическим DIV (пример, который Mianto дал, а затем отредактировал Moritz, жестко запрограммирован), измените следующее в строке 51:

function convert(input, datalist, listItems) {
    var fakeList = document.createElement('ul');
    var visibleItems = null;
    fakeList.id = listId;
    fakeList.className = LIST_CLASS;
    document.body.appendChild( fakeList );

чтобы:

function convert(input, datalist, listItems) {
    var fakeList = document.createElement('ul');
    var visibleItems = null;
    fakeList.id = listId;
    fakeList.className = LIST_CLASS;
    input.parentNode.style.position = "relative";
    input.parentNode.appendChild( fakeList );

Ответ 6

Поддержка Safari станет частью будущих выпусков iOS и MacOS, которые, скорее всего, будут выпущены в конце февраля/начале марта.

И вы могли бы также использовать другой polyfill для этого: https://github.com/mfranzke/datalist-polyfill/

Ответ 7

Начиная с Safari 12.1, datalist теперь наконец поддерживается. Пожалуйста, смотрите заметки о выпуске Apple.

Похоже, что разработчик mdn рекомендовал полифилл остается в курсе:

Обновление: Safari TP поддерживает элемент списка данных, по крайней мере, в основном, и его функциональность будет включена в следующую версию Safari как для iOS, так и для MacOS X. Да! Волнующие новости! Я планирую выпустить новую основную версию в ближайшее время, чтобы поддержать и реализовать их