Question

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

第一次加载页面时，只有：

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

因此，首次单击时没有下拉菜单。（非常好！）当用户在输入字段中键入一个符号时，它会生成一些<option>标记，buuuut不会删除菜单。我必须先输入第二个标志。

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 />");     
        }
    });
});

如果还有其他选项可以创建Google搜索输入字段，请告诉我。

Answer 1

在做ajax查询之前必须清空options，也可以简化options的插入

$(".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 />");     
        }
    });
});

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

1 个答案: