Jquery 文本字段自动完成

Question

大家好，我有以下问题。

我为自己制作了以下自动完成功能，我希望在用户输入 invalid city 时显示在 "no match found" 或 "no city found" 等文本框下。

这是我的 Jquery。

（附注）我需要它在没有任何自动完成插件等的情况下工作。

$('.form-control').keyup(function(e){
    e.preventDefault();
    $.ajax({
        method: "GET",
        url: "https://api.teleport.org/api/cities?search=" + $('.form-control').val(),

}) .done(function(data){
        if(typeof data._embedded["city:search-results"][0] === 'undefined') {
            $('#datalist').append('Please select a valid value.');
        } else {
    console.log(data._embedded["city:search-results"][0].matching_full_name);
    $('option:eq(0)').remove();
    $('#datalist').append('<option value="' + data._embedded["city:search-results"][0].matching_full_name + '">');
}

});
});

Answer 1

这是你想要达到的目标吗？

$('.form-control').keyup (function (e) {
    e.preventDefault ();
    $.ajax ( {
        method: "GET",
        url: "https://api.teleport.org/api/cities?search=" + $('.form-control').val (),

    } )
    .done ( function(data){

        if(typeof data._embedded["city:search-results"][0] === 'undefined') {
            $('#datalist').html ('');
            $('#datalist').html ('No Match Found');
        }
        else {
            console.log (data._embedded["city:search-results"][0].matching_full_name);
            $('#datalist').html ('');
            $('option:eq(0)').remove ();
            $('#datalist').html ('<option value="' + data._embedded["city:search-results"][0].matching_full_name + '">' + data._embedded["city:search-results"][0].matching_full_name + '</option>');
        }

    });
});