Question

我正在开展一个项目，我在其中自动完成了用户列表。

当我尝试将自动完成选择的值推送到全局数组时，当我在自动完成功能之外执行console.info（用户名）时，我得到一个空列表。

var usernames=[];
$(document).ready(function(){
    $(function(){

     $( "#users" ).autocomplete({

   source: function( request, response ) {
    $.ajax({
      type: "GET",
      url: "getUserFromDb.php",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function( data ) {
        response( data );
      }
    });
  },
  minLength: 2,
  select: function(event,ui){
    usernames.push(ui.item.value);
    }
});
console.info(usernames);
  });

    });

自动完成的soruce正在返回正确的列表并且选择也正常工作，因为如果我在自动完成内部执行console.info（usernames）选择：当我选择不同的值时，列表将更新。

Answer 1

既然你需要一个“答案”，我们就去吧。首先，您的console.info在DOM准备就绪后立即运行，并且当您从自动完成中选择选项时，稍后推送用户名时显然为空。其次，您不会重新登录usernames，因为它已填充。所以，你有2个选择。

1）在select函数中记录usernames，例如：

select: function(event,ui) {
    usernames.push(ui.item.value);
    console.info(usernames);
}

2）有一个能为你完成工作的功能，例如：

select: function(event,ui) {
    usernames.push(ui.item.value);
    showMeUserNames();
}

function showMeUserNames() {
    console.info(usernames);
}

因此，您的代码可能会变成：

var usernames=[];

$(function(){
    $( "#users" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                type: "GET",
                url: "getUserFromDb.php",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function( data ) {
                    response( data );
                }
            });
        },
        minLength: 2,
        select: function(event,ui) {
            usernames.push(ui.item.value);
            console.info(usernames);
            // OR
            // showMeUserNames();
        }
    });
});

function showMeUserNames() {
    console.info(usernames);
}

无法在JavaScript中将自动完成选定值推送到全局数组

1 个答案: