Javascript Jquery autocomplete仅在我输入第四个字母后显示结果

我有一个输入，用户在其中插入一个城市名称，然后我用

onkeyup

function autocompleteCity(id){


console.log($('#'+id).val());

if($('#'+id).val().length >= 2){
    var data = {
        query: $('#'+id).val()
    }

    $.ajax({
        url: location.origin + '/autocomplete/city',
        headers: {
            apiKey: APIKEY
        },
        type: "POST",
        data: data,
        dataType: "json",
        async: true,
        success: function (data) {

            var cities = [];
            for(var i=0;i<data.cities.length;i++){
                cities.push(data.cities[i].city);
            }
            console.log(cities);

            $('#'+id).autocomplete({
                source: cities
            });

        },
        error: function (err) {

            console.log(err);
        }
    });
}

但直到用户输入“Toky”后，自动完成才会显示

---

这正常吗？还是我做错了什么？

使用指定的minLength选项初始化自动完成

$( ".selector" ).autocomplete({ minLength: 2 });

---

它将对ajax起作用，您只需要实现

源代码

选项，对于用户必须输入的最小字符数，有

最小长度

选项

$( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: location.origin + '/autocomplete/city',
          dataType: "json",
          type: "POST",
          headers: {
               apiKey: APIKEY
          },  
          data: {
            q: request.term
          },
          success: function( data ) {

            // Handle 'no match' indicated by [ "" ] response
            response( data.length === 1 && data[ 0 ].length === 0 ? [] : data );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.label );
      }
}):

---

请分享html部分您使用过jquery ui自动完成吗？

$( ".selector" ).autocomplete({ minLength: 2 });

$( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: location.origin + '/autocomplete/city',
          dataType: "json",
          type: "POST",
          headers: {
               apiKey: APIKEY
          },  
          data: {
            q: request.term
          },
          success: function( data ) {

            // Handle 'no match' indicated by [ "" ] response
            response( data.length === 1 && data[ 0 ].length === 0 ? [] : data );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.label );
      }
}):