Question

数据列表显示为空，但我可以在谷歌浏览器的“网络”标签上看到它。我想实现自动完成功能，以使用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

Answer 1

您正在从服务器获取数据，因此必须使用ajax调用

<!DOCTYPE html>
<html>

<head>
  <style>
    form,
    iframe,
    hr {
      width: 96%
    }
    
    select {
      display: inline-block;
    }
    
    #primary {
      width: 45%
    }
    
    .send {
      float: right;
    }
    
    .secondary {
      width: 52%;
      margin: 0 0 5px 5px
    }
    
    .hide {
      display: none
    }
    
    hr {
      clear: both;
    }
  </style>
</head>

<body>

  <form id="list" action="https://httpbin.org/post" method="post" target='response'>
    <select id="primary" name="primary">
      <option value="" selected>Wat wil je gaan doen?</option>
      <option value="shop">Shoppen</option>
      <option value="dining">Uit eten</option>
      <option value="food">Snacken / snoepen</option>
      <option value="drink">Drankje doen</option>
      <option value="events">Evenementen bezoeken</option>
      <option value="booking">Stappen</option>
      <option value="culture">Cultuur snuiven</option>
      <option value="sites">Sightseeing</option>
      <option value="kids">Kids</option>
      <option value="info">Meer info</option>
    </select>

    <select class="secondary">
      <option>Verfijn je keuze</option>
    </select>

    <select id="dining" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="ontbijt">Ontbijt</option>
      <option value="lunch">Lunch</option>
      <option value="diner">Diner</option>
      <option value="vis">Vis</option>
      <option value="vlees">Vlees</option>
      <option value="broodje">Broodje</option>
      <option value="patatje">Patatje</option>
      <option value="tapas">Tapas</option>
      <option value="hamburger">Hamburger</option>
      <option value="grieks">Grieks</option>
      <option value="pizza">Pizza</option>
      <option value="pasta">Pasta</option>
      <option value="traiteur">Traiteur</option>
    </select>
    <select id="food" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="snelle snack">Snelle snack</option>
      <option value="snoepen">Snoepen</option>
      <option value="IJsje">IJsje</option>
      <option value="kroketje">Kroketje</option>
      <option value="brammetje">Brammetje</option>
    </select>
    <select id="drink" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="iets fris">Iets fris</option>
      <option value="thee">Thee</option>
      <option value="koffie">Koffie</option>
      <option value="biertje">Biertje</option>
      <option value="wijntje">Wijntje</option>
      <option value="whiskey">Whiskey</option>
      <option value="cocktail">Cocktail</option>
      <option value="slush">Slush</option>
    </select>
    <select id="events" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="in het stadscentrum">In het stadscentrum</option>
      <option value="events">Evenement</option>
      <option value="braderie">Braderie</option>
      <option value="rondje dorp">Rondje dorp</option>
    </select>
    <select id="booking" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="eten">Eten</option>
      <option value="drinken">Drinken</option>
      <option value="theater">Theater</option>
      <option value="danser">Dansen</option>
      <option value="muziek">Muziek</option>
    </select>
    <select id="culture" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="kunst">Kunst</option>
      <option value="stadscentrum historie">Stadscentrum historie</option>
      <option value="buitenlandse restaurants">Buitenlandse restaurants</option>
      <option value="culture">Cultuur</option>
      <option value="schilderen">Schilderen</option>
      <option value="kunst uitleen">Kunst uitleen</option>
      <option value="uitleen">Uitleen</option>
      <option value="galerie">Galerie</option>
      <option value="workshops">Workshops</option>
    </select>
    <select id="sites" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="architectuur bekijken">Architectuur bekijken</option>
      <option value="de boekenberg">De Boekenberg</option>
      <option value="theater de stoep">Theater de Stoep</option>
      <option value="voorstraat">Voorstraat</option>
      <option value="museum winkel">Museum winkel</option>
    </select>
    <select id="kids" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="speelgoed">Speelgoed</option>
      <option value="speeltuin">Speeltuin</option>
    </select>
    <select id="info" class="hide secondary" name="secondary" disabled>
      <option value="" selected>Verfijn je keuze</option>
      <option value="parkeren">Parkeren</option>
      <option value="naar de wc">Naar de wc</option>
      <option value="plattegrond bekijken">Plattegrond bekijken</option>
      <option value="koopzondagen">Koopzondagen</option>
      <option value="toezicht en beveiliging">Toezicht en beveiliging</option>
    </select>
    <br>
    <input class='send' type="submit" value="Bekijk resultaten" disabled>
    <br>
    <hr>
    <iframe name='response'></iframe>

  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#primary').on('change', function() {
      $('.secondary').addClass('hide').prop('disabled', true).val('');
      var category = $(this).val();
      if (category === 'shop') {
        $('.send').prop('disabled', false);
      } else if (category === '') {
        $('.send').prop('disabled', true);
      } else {
        $('#' + category).removeClass('hide').prop('disabled', false).val('');
        $('.send').prop('disabled', true);
      }
    });

    $('.secondary').on('change', function() {
      if ($(this).val() === '') {
        $('.send').prop('disabled', true);
      } else {
        $('.send').prop('disabled', false);
      }
    });
  </script>
</body>

</html>

有关更多信息，请查看文档-https://jqueryui.com/autocomplete/ 由于您的json数组包含地址属性，因此您可能需要将这些属性组合在字符串中。

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

1 个答案: