使用HTML5(datalist)自动填充’包含’方法,而不只是’开始’

(我找不到，但是我又不知道如何搜索它。)

我想使用< input list = xxx>和< datalist id = xxx>要获得自动完成，但是我希望浏览器通过“包含”方法匹配所有选项，而不是“开始”，这似乎是标准的。有办法吗

如果不是简单的，有没有办法强制显示我想显示的建议，而不是浏览器匹配的建议？假设我正在键入“foo”，我想显示选项“bar”和“baz”。我可以强迫用户使用吗？如果我只是用这些(用JS)填写数据记录器，浏览器仍然会执行“开始”检查，并将其过滤掉。

我想要最终控制datalist选项显示。不是在它的UI，灵活性，可访问性等，所以我不想完全重画。甚至不建议一个jQuery插件。

如果我能最终控制表单元素验证，为什么不自动完成，对吧？

编辑：我现在看到，Firefox确实使用’包含’方法…这甚至不是一个标准？有什么办法强制这个吗我可以改变Firefox的方式吗？

编辑：我做了这个来说明我想要的：http://jsfiddle.net/rudiedirkx/r3jbfpxw/

> HTMLWG’s specs on [list]
> W3’s specs on datalist
> DavidWalsh example
> HONGKIAT’s summary on behaviors..?

解决方法

‘包含’的方法

也许这是你正在寻找(你的问题的第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,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>

编辑

显示搜索内容的一种不同的方法，以说明发生了什么。这也适用于Chrome。灵感来自Show datalist labels but submit the actual value

'use strict';
var datalist = {
        r: ['ralph','ronny','rudie'],ru: ['rudie','rutte','rudiedirkx'],rud: ['rudie',rudi: ['rudie'],rudo: ['rudolf'],foo: [
            { value: 42,text: 'The answer' },{ value: 1337,text: 'Elite' },{ value: 69,text: 'Dirty' },{ value: 3.14,text: 'Pi' }
        ]
    },SEPARATOR = ' > ';

function updateList(that) {
    var lastValue = that.lastValue,array,key,end = that.selectionEnd;

    if (lastValue !== value) {
        if (value !== '') {
            if (value in datalist) {
                key = value;
            } else {
                Object.keys(datalist).some(function (a) {
                    return ~a.toLowerCase().indexOf(value.toLowerCase()) && (key = a);
                });
            }
        }
        that.list.innerHTML = key ? datalist[key].map(function (a) {
            return '<option data-value="' + (a.value || a) + '">' + value + (value === key ? '' : SEPARATOR + key) + SEPARATOR + (a.text || a) + '</option>';
        }).join() : '';
        updateInput(that);
        that.lastValue = value;
    }
}

function updateInput(that) {
    var value = that.value,pos = value.lastIndexOf(SEPARATOR),end = that.selectionEnd;

    if (~pos) {
        value = value.slice(pos + SEPARATOR.length);
    }
    Object.keys(that.list.options).some(function (option) {
        var o = that.list.options[option],p = o.text.lastIndexOf(SEPARATOR);
        if (o.text.slice(p + SEPARATOR.length) === value) {
            value = o.getAttribute('data-value');
            return true;
        }
    });
    that.value = value;
    that.setSelectionRange(start,end);
}

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

<input list="xxx" name="xx" id="xx">
<datalist id="xxx" type="text"></datalist>