Невозможно получить данные, используя функцию автозаполнения - PullRequest
0 голосов
/ 11 декабря 2018

Список данных отображается пустым, в то время как я вижу его на вкладке Сеть в Google Chrome.Я хочу реализовать функции автозаполнения для получения адреса с помощью Jquery.В бэкэнде я использую весеннюю загрузку и получаю список адресов из базы данных.Все в порядке, я могу получить данные Json в браузере и увидеть их на вкладке сети Chrome.Возможно, не хватает логики для правильной реализации.Картинка скажет это намного лучше.

json данные на вкладке сети

и на переднем конце

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#automplete-1" ).autocomplete({
                source: "/addressAutocomplete",
                 autoFocus:true,
                minLength: 2,
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

контроллер

  @GetMapping("/addressAutocomplete")
      @ResponseBody
      public List<Address> getSearchdata (@RequestParam(value = "term", defaultValue = "", required = false) String term){
          /*List<String> list=new ArrayList<String>();
          list.add("subodh");
          list.add("surender");
          return list;*/
          System.out.println("service -->"+searchService.fetchAddress().toString());
        return searchService.fetchAddress();

      }

может просматривать данные в браузере, но не может получить их с помощью функции автозаполнения

данные Json

1 Ответ

0 голосов
/ 11 декабря 2018

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

    $("#automplete-1).on("keyup",function(){  //put different event accordingly

    $.ajax({
      url:'/addressAutocomplete',
      type:'get',
      success:function(data)
    {
      $(function() {
                $( "#automplete-1" ).autocomplete({
                    source: data,
                     autoFocus:true,
                    minLength: 2,
                });
             });
    }


    });

});

Более подробно вы можете посмотреть в документации - https://jqueryui.com/autocomplete/ Поскольку ваш массив json содержит адресатрибуты, которые могут понадобиться для объединения этих атрибутов в строку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...