如何為輸入分配數據列表？

Question

我有這個HTML：

<input type="text" name="city" autocomplete="off">

<datalist id="seek_list">
<option value="Value1">
<option value="Value2">
</datalist>

和這個Javascript：

$('input[name=city]').on('keyup', function()
{
    if (this.value.length > 1)
    {
        this.list = 'seek_list';
    }
    else
    {
        this.list = ''; 
    }
});

我希望自動填充功能在用戶在輸入字段中輸入2個或更多字符后起作用，但這不起作用。 數據列表未分配。 我也嘗試過這種方法，但是沒有運氣：

<input type="text" name="city" autocomplete="off" list="seek_list">

<datalist>
<option value="Value1">
<option value="Value2">
</datalist>

$('input[name=city]').on('keyup', function()
{
    if (this.value.length > 1)
    {
        $('datalist')[0].id = "seek_list";
    }
    else
    {
        $('datalist')[0].id = "";
    }
});

唯一起作用的是此HTML的數據列表為空：

<input type="text" name="city" autocomplete="off" list="seek_list">

<datalist id="seek_list">
</datalist>

並使用Javascript將選項附加到數據列表，但這很慢。

Answer 1

您需要使用.attr(attributeName, value)和.removeAttr(attributeName)設置元素的.removeAttr(attributeName)

$('input[name=city]').on('keyup', function() {
    if (this.value.length > 1) {
        $(this).attr('list', 'seek_list');
    } else {
        $(this).removeAttr('list')
    }
});