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

Question

我正在做一个项目，其中我有用户列表自动完成。

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

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

    });

自动完成的来源返回正确的列表，并且选择也有效，因为如果我在自动完成选择中执行 console.info(usernames)：当我选择不同的值时，列表将更新。

Answer 1

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

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