Используйте автозаполнение HTML5 (datalist) с использованием метода "содержит", а не только "начинается с",

(Я не могу его найти, но опять же я не знаю, как его искать.)

Я хочу использовать <input list=xxx> и <datalist id=xxx> для получения автозаполнения, НО я хочу, чтобы браузер соответствовал всем параметрам с помощью подхода "содержит", а не "начинается с", что кажется стандартным. Есть ли способ?

Если не просто, есть ли способ принудительно показать предложения, которые я хочу показать, а не те, которые совпадают с браузером? Скажем, я набираю "foo", и я хочу показать опции "bar" и "baz". Могу ли я принуждать их к пользователю? Если я просто заполню datalist этими (с JS), браузер все равно выполнит проверку "начинается с" и отфильтровывает их.

Я хочу получить максимальный контроль над тем, как показывают параметры datalist. НЕ над своим интерфейсом, гибкостью, доступностью и т.д., Поэтому я не хочу полностью переделывать его. Даже не предлагайте плагин jQuery.

Если я могу проверить правильность элемента элемента управления, почему бы не автозаполнение, правильно?

изменить: Теперь я вижу, что Firefox действительно использует подход "содержит"... Это даже не стандарт? Любой способ заставить это? Могу ли я изменить способ Firefox?

edit: Я сделал это, чтобы проиллюстрировать, что мне хотелось бы: http://jsfiddle.net/rudiedirkx/r3jbfpxw/

Ответ 1

"содержит" подход

Возможно, это то, что вы ищете (часть 1 вашего вопроса).

Это происходит с ограничением "начинается с" и изменяется при выборе.

'use strict';
function updateList(that) {
    if (!that) {
        return;
    }
    var lastValue = that.lastValue,
        value = that.value,
        array = [],
        pos = value.indexOf('|'),
        start = that.selectionStart,
        end = that.selectionEnd,
        options;

    if (that.options) {
        options = that.options;
    } else {
        options = Object.keys(that.list.options).map(function (option) {
            return that.list.options[option].value;
        });
        that.options = options;
    }

    if (lastValue !== value) {
        that.list.innerHTML = options.filter(function (a) {
            return ~a.toLowerCase().indexOf(value.toLowerCase());
        }).map(function (a) {
            return '<option value="' + value + '|' + a + '">' + a + '</option>';
        }).join();
        updateInput(that);
        that.lastValue = value;
    }
}

function updateInput(that) {
    if (!that) {
        return;
    }
    var value = that.value,
        pos = value.indexOf('|'),
        start = that.selectionStart,
        end = that.selectionEnd;

    if (~pos) {
        value = value.slice(pos + 1);
    }
    that.value = value;
    that.setSelectionRange(start, end);
}

document.getElementsByTagName('input').browser.addEventListener('keyup', function (e) {
    updateList(this);
});
document.getElementsByTagName('input').browser.addEventListener('input', function (e) {
    updateInput(this);
});

<input list="browsers" name="browser" id="browser" onkeyup="updateList();" oninput="updateInput();">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

Ответ 2

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

 elem.autocomplete({
    source: list.children().map(function() {
        return $(this).text();
    }).get()

Ответ 3

но эта тема опубликована около 2 лет назад. но если вы читаете этот поток, возможно, вам нужно проверить более новую версию вашего браузера:

Текущая спецификация: https://html.spec.whatwg.org/multipage/forms.html#the-list-attribute

Пользовательским агентам рекомендуется фильтровать предложения, представленные исходный элемент предложений, когда количество предложений большие, в том числе только наиболее релевантные (например, на основе вход до сих пор). Точный порог не определен, но ограничение списка от четырех до семи значений является разумным. Если фильтрация основана на пользовательский ввод, пользовательские агенты должны использовать подстроку подстроки как для ярлык предложений и значение.

И когда это сообщение написано, поведение Firefox (51) и Chrome (56) уже было изменено в соответствии со спецификацией.

что означает, что op want должен работать только сейчас.