jQuery UI Autocomplete не показывает результаты AJAX

Я пытаюсь создать форму автозаполнения, которая будет загружать JSON из внешней базы данных (которая возвращает JSON) на пользовательский ввод. Мой код работает нормально, поскольку он будет регистрировать массив, содержащий несколько объектов JSON. Однако пользовательский интерфейс jQuery не показывает результаты на самой странице.jQuery UI Autocomplete не показывает результаты AJAX

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Tables</title> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
</head> 
<body> 

    <div class="ui-widget"> 
     <input type="text" id="tags" /> 
    </div> 

    <script src="assets/js/script.js"></script> 
</body> 
</html>

$(document).ready(function(){ 
    function createUrl(input){ 
     var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input; 
     return url; 
    } 

    function getSource(input){ 
     var input = input.term; 
     var url = createUrl(input); 

     $.getJSON(url, function(data){ 
      var items = []; 

      $.each(data, function(key, val){ 
       items.push(val); 
      }); 

      console.log(items); // Shows correct results 

      return items; 
     });  
    } 

    $("#tags").autocomplete({ 
     minLength: 2, 
     source: getSource 
    }); 
});

Что может быть проблема? Благодарю вас.

источник

2015-11-24 Enzio

Возможный дубликат [? Как вернуть ответ от асинхронного вызова] (http://stackoverflow.com/questions/14220321/how-do-i-return-the -response-from-an-асинхронный вызов) – madalinivascu

где вы называете эту функцию 'getSource'? – madalinivascu

Ваша проблема может заключаться в том, что вы возвращаете результаты только в функцию обратного вызова 'getJSON', ваша функция' getSource' ничего не возвращает ... –

попробовать:

$("#tags").autocomplete({ 
     minLength: 2, 
     source: function(request, response) { 
      $.getJSON("http://forums.zybez.net/runescape-2007-prices/api/"+request.term, function(data){ 
      var items = []; 

      $.each(data, function(key, val){ 
       items.push(val); 
      }); 

      console.log(items); // Shows correct results 
      response(items); 
     });  
     } 
    });

см: http://jsfiddle.net/4g3818rr/

источник

2015-11-24 19:11:30 madalinivascu

Это не сработает. Прежде всего, поскольку getSource не запускается вообще, а во-вторых, потому что мне нужна функция автозаполнения для запуска функции getSource, а не наоборот. – Enzio

Что вы пытаетесь выполнить с данными, для чего предназначены эти данные? – madalinivascu

Я хочу дать пользователю предложенные данные, полученные из API на основе его ввода. – Enzio

Благодаря ответу Mădălin и комментарии О. А., я нашел решение:

function createUrl(input){ 
    var url = "http://forums.zybez.net/runescape-2007-prices/api/" + input; 
    return url; 
} 

$("#tags").autocomplete({ 
    minLength: 2, 
    source: function(request, response) { 
     var term = this.term; 
     var url = createUrl(term); 

     $.getJSON(url, function(data){ 
      var items = []; 

      $.each(data, function(key, val){ 
       items.push(val); 
      }); 

      response(items); 
     });  
    } 
});

источник

2015-11-24 19:34:42 Enzio

При установке источника автозаполнения, как это :

$("#btnArtist").autocomplete({ source: "/Ajax/Home/AutoCompleteData" });

Вы можете увидеть возвращенные данные JSON с сервера в консоли, но он не покажет результаты.

Изменение URL-адреса объекту Ajax устраняет проблему. Вот рабочий код:

$("#btnArtist").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "/Ajax/Home/AutoCompleteData", 
      data: { 
       term: request.term 
      } 
     }).done(function (data) { 
      response(data); 
     }); 
    } 
})

источник

2017-11-11 00:22:53

jQuery UI Autocomplete не показывает результаты AJAX

ответ

Смежные вопросы