无法使用自动完成功能获取数据答案

【问题标题】：Unable to fetch data using autocomplete feature无法使用自动完成功能获取数据
【发布时间】：2019-05-12 19:10:14
【问题描述】：

数据列表显示为空，而我可以在谷歌浏览器的网络选项卡上看到它。我想实现自动完成功能以使用 Jquery 检索地址。在后端，我使用的是 spring boot，我正在从数据库中检索地址列表。一切都很好，我可以在浏览器上获取 Json 数据，并可以在 chrome 的网络选项卡上看到它。可能缺少一些逻辑来正确实现它。一张照片会更好。

json data on network tab

和前端

<!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 data

【问题讨论】：

标签： jquery spring-mvc spring-boot thymeleaf

【解决方案1】：

您正在从服务器获取数据，因此您必须使用类似这样的 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 数组包含地址属性，您可能需要将这些属性组合在一个字符串中。

【讨论】：