如何使新的 html 5 datalist 输入立即打开？

问题很难理解，英语不是我的母语，我会尽力而为。 所以新的html标签<datalist>允许我创建一个带有下拉菜单的输入字段（实际上不确定如何调用它）。

第一次加载页面时只有：

<input list='Chemikalienliste' class="input_search" />
<datalist id='Chemikalienliste'></datalist>
<a href="#" class="add_button">+</a>

因此，当您第一次单击它时，没有下拉菜单。 （那挺好的！） 当用户在输入字段中输入符号时，它会生成一些符号<option>标签，但不会删除菜单。我必须先输入第二个符号。

for(var i = 0; i < data.length; i++){
    suchergebnis = suchergebnis+ "<option value='"+data[i].Trvialname+" ("+data[i].Chemischername+")"+"' />";   
}           
input_search.parent(".add").children("#Chemikalienliste").children("option").remove(); //deletes all options
input_search.parent(".add").children("#Chemikalienliste").append(suchergebnis);//adds new options

整个代码

$(".input_search").focus().keyup(function(){ //user types something
    var input_search = $(this);
    var searchstring = input_search.val();
    $.ajax({
        url:"api.php",
        data:"search="+searchstring,
        type:"POST",
        dataType:"json",
        success: function(data){ //recieve data
            var suchergebnis = "";
            for(var i = 0; i < data.length; i++){
                suchergebnis = suchergebnis+ "<option value='"+data[i].Trvialname+" ("+data[i].Chemischername+")"+"' />";   
            }           
            input_search.parent(".add").children("#Chemikalienliste").children("option").remove();
            input_search.parent(".add").children("#Chemikalienliste").append(suchergebnis);
            input_search.focus();
        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#output").append("<span class='message'>[ajax]</span> <span class='failed'>Error:</span> XMLHttpRequest " + XMLHttpRequest[0] + " errorThrown: " + errorThrown +" textstatus : " +                                                                                                textStatus+" <br />");     
        }
    });
});

如果还有其他选项可以创建类似谷歌搜索输入字段的内容，请告诉我。

在进行ajax查询之前必须清空选项，还可以简化选项的插入

$(".input_search").focus().keyup(function(){ //user types something
    var input_search = this;
    $(input_search).next().empty();
    $.ajax({
        url:"api.php",
        data:"search="+$(input_search).val(),
        type:"POST",
        dataType:"json",
        success: function(data){ //recieve data
            
            for(var i = 0; i < data.length; i++){
                $('<option>' + data[i].Trvialname + '</option>').appendTo($(input_search).next());
            }           
        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#output").append("<span class='message'>[ajax]</span> <span class='failed'>Error:</span> XMLHttpRequest " + XMLHttpRequest[0] + " errorThrown: " + errorThrown +" textstatus : " +                                                                                                textStatus+" <br />");     
        }
    });
});