Блог

Главная - Вопросы по программированию - jQueryUI автозаполняет данные из текстового / csv-файла с помощью $.ajax

jQueryUI автозаполняет данные из текстового / csv-файла с помощью $.ajax

#javascript #jquery #function #jquery-ui #autocomplete

#javascript #jquery #функция #jquery-пользовательский интерфейс #автозаполнение

Вопрос:

Я пытался внести изменения в пример из http://jqueryui.com/autocomplete/#maxheight для работы с входными данными из локально сохраненного текстового / csv-файла, имеющего вид

 ItemA
ItemB
ItemC
....

Я могу создать массив из данных в текстовом файле и распечатать его в console.log(), но я не уверен, как передать этот массив функции автозаполнения. Я пытался инициализировать массив a вне функции, но при использовании его в режиме автозаполнения он будет использовать незаселенный массив a.

 </style>
<script type="text/javascript" language="javascript">


$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "john.txt",
    dataType: "text",
    success: function(data) {processData(data);}
 });
});

var a = [];
function processData(myTxt) {
    var myLines = myTxt.split(/rn|n/);
    for (var i=1; i<myLines.length; i  ) {
          a.push(myLines[i]);
        }
        console.log(a);
}


$( "#tags" ).autocomplete({
    source: a
});
</script>

Как мне правильно передать массив в автозаполнение?

Комментарии:

1. console.log(a) Выдает правильный вывод массива … верно?

2. ДА. Но если я помещаю console.log(a) вне функции, она возвращает [], поэтому я предполагаю, что вся моя структура кода немного искажена.

Ответ №1:

Я думаю, вы пытаетесь добавить источник автозаполнения до завершения AJAX-запроса.

Запрос выполняется на $(document).ready() , но перед ним задается источник автозаполнения. Таким образом, a по-прежнему остается пустым.

Попробуйте это: 

 var a = [];
function processData(myTxt) {
    var myLines = myTxt.split(/rn|n/);
    for (var i=1; i<myLines.length; i  ) {
          a.push(myLines[i]);
        }
        console.log(a);
        $( "#tags" ).autocomplete({
            source: a
        });
}