Использование Typeahead с исходным кодом json

Итак, я пытаюсь запустить тип и запустить его. Я добавил исходники и jquery в свой проект и начал со следующего:

var countries = ["a list of countries","USA","Germany","Austria", "others"];

$('.typeahead').typeahead({
    source: countries
});

Поскольку это работает, я знаю, что работает сам typeahead.

Однако, когда я использую пример на веб-сайте, я не могу работать с json на стороне сервера.

Код, который я использую:

      $("input.typeahead").typeahead({
           onSelect: function(item) {
               console.info(item);
           },
           ajax: {
               url: "/backend/getsearchbox",
               timeout: 500,
               displayField: "label",
               valueField: "value",
               triggerLength: 3,
               method: "get",

               preDispatch: function (query) {

                   return {
                       search: query
                   }
               },
               preProcess: function (data) {

                   if (data.success === false) {
                       // Hide the list, there was some error
                       return false;
                   }
                   // We good!
                   return data.mylist;
               }
           }
       });

при использовании инструмента проверки Chrome в сети я вижу свой запрос в списке

Request URL: https://domain.tld/backend/getsearchbox?search=aust
Request Method: GET
Status Code: 200

Когда я обращаюсь к самой ссылке с поисковым запросом, я получаю следующий результат: Обновлено: Моя ошибка. В JSON была ошибка:

[{"label":"Austria","value":"Austria Value"},{"label":"Australia", "value":"Australia Value"}]

Так что, по моему мнению, он должен работать. Тем не менее, я не получаю никаких результатов. Я также не получаю ошибок от самой консоли.

Благодарен за любой совет!

jquery typeahead

29.01.2019 12:19

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

183

Ответы 2

Я думаю, что ваша структура объекта JSON неверна в позиции 1

он должен иметь ту же структуру объекта JSON

[{"label":"Austria","value":"Austria Value"},{"Australia":"Australia Value"}]

Если вы посмотрите на индекс массива 1, у него есть значения без ключа. и в соответствии с печатным шрифтом у него много label & value, потому что вы указали в настройках

 displayField: "label",
 valueField: "value",

Поэтому вам нужно создать структуру с сервера с правильным ключом и значением, или вы можете сделать это после ответа функции preProcess.

Итак, наконец, правильный ответ должен выглядеть так

[{"label":"Austria","value":"Austria Value"},
{"label":"Australia":"value":"Australia Value"}, 
{"label":"India","value":"India Value}]

извините, да. вместо стран у меня в них личные данные, поэтому я их отредактировал. JSON всегда имеет метку и значение.

— 29.01.2019 12:41

29.01.2019 12:37

Попробуйте проанализировать строку JSON с помощью JSON.parse(), это сработало для меня

var countries = [];
countries = JSON.parse(data.mylist);

$('.typeahead').typeahead({
   source: countries
});

как бы я определил data.mylist? как ответ json

— 29.01.2019 12:55

Я имел в виду, что вы должны разобрать ответ,

— 29.01.2019 13:16

Я имел в виду, что вы должны разобрать ответ, я подумал, что вы можете разобрать data.mylist и сохранить его в глобальной переменной страны, затем вы можете использовать его в источнике ввода, я сделал что-то подобное в angular 6. Но я убедитесь, что jQuery аналогичен (вам нужно будет использовать $('.typeahead').typeahead({ source: countries }); только после того, как вы получите ответ от сервера)

— 29.01.2019 13:22

да, я понимаю, что вы имеете в виду, я просто не знаю, как это сделать. Я понятия не имею, как это сделать вне функции typeahead.

— 29.01.2019 13:32

29.01.2019 12:42