javascript - 如何在 Chrome 中触发 onSelect Datalist

Question

我在 Mozilla Firefox 上开发了我的项目。我没有考虑其他浏览器。此 onSelect 函数在 Chrome 上不起作用。

我有客户名单，想根据输入获取相关名称。当用户单击列出的客户端时，我的函数会填充其他输入。这在 Firefox 中非常有效。

<div class="form-group col-md-6">

   <label>Vorname</label>
    <input class="form-control" id="vorname" placeholder="Vorname" onSelect='selectClient(this)' list="kunden">
    <datalist id="kunden">
    <?php 
           foreach($clients as $client)
           {    
                 echo("<option id='{$client["id"]}' value='{$client["id"]}'> $client["vorname"]} {$client["nachname"]} -- {$client["address_ort"]}</option>");                                         }
     ?>                                 

    </datalist>
</div>

function selectClient(item){

    if(!isNaN(item.value)){
    isOldClient=true;
    oldClientId=item.value;
    <?php
    echo "var clients_array = ". $js_array . ";\n";
    ?>
    var client=clients_array[item.value-1];
    $("#nachname").val(client["nachname"]);
    $("#geburtsdatum").val(client["geburtsdatum"]);
    $("#vorname").val(client["vorname"]);
    $("#telefon").val(client["telefonnummer"]);
    $("#strasse").val(client["address_str"]);
    $("#hausno").val(client["address_no"]);
    $("#plz").val(client["address_plz"]);
    $("#ort").val(client["address_ort"]);
    }
    else{
        isOldClient=false;
    }
};

这是 mozilla firefox(无法捕获选项列表):https://youtu.be/rnOUudSlBv4

这是 Chrome : https://youtu.be/jE6DM-Gwc4I希望有人能找到解决方案。预先感谢您的回答。

Answer 1

您可以尝试这种方式，这可能适用于所有浏览器

 $('#vorname').on('input', function () {
     console.log('Input has been changed');
     selectClient($(this).val()); // call your function
 });

尝试这个，如果它是从数据列表中选择的，或者类型，您可以添加 if notempty/null 条件

$("#vorname").on('change', function () {
    var val = this.value;
    if($('#kunden').filter(function(){
        return this;        
    }).length) {
        // if selected
        alert('selected= '+this.value);
    }else {
        // if typed
        alert('new= '+this.value)
    }
});

如果您使用此功能，请删除 onSelect，因为它会在 Firefox 中触发两次。