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>'); 
     } 

    }); 
});