如何将搜索建议添加到 ajax 成功

Question

我需要将搜索建议添加到文本框中。我尝试了很多方法。但我找不到正确的方法。我使用ajax从后端获取数据（arraylist）。然后将其作为json返回给jsp。现在我需要根据ajax成功添加搜索建议功能。 ajax成功的dataType是json。

$("#tagText").bind("keyup", function (event){
     event.preventDefault();
     var tagSuggest = $("#tagText").val();
     var url= "../operation/SuggestSupport!searchSuggest.action?documentTag.tagText="+tagSuggest+"&page=0&activePage=0";
      $.ajax({
         type: "POST",
         url: url,
         dataType:"json",
         success: function(data){

         //search suggestions code

      },
      error: function (data){
      alert("Error");
      }
      });
});

这是我的文本框

<div class="input-group">
     <s:textfield name="document.tagText" id="tagText" cssClass="form-control" maxlength="100" autocomplete="off" style="width: 237px; border-radius: 4px;"/> 
</div>

Answer 1

您应该将 div 放到您的 HTML 示例中：-

<div class="input-group">
 <s:textfield name="document.tagText" id="tagText" cssClass="form-control" maxlength="100" autocomplete="off" style="width: 237px; border-radius: 4px;"/> 
</div>
<div class="suggestion-wrap">
   <ul>
      <li></li>
      <li></li>
   </ul>
</div>

你的ajax应该是这样的：-

$("#tagText").bind("keyup", function (event){
  event.preventDefault();
  var tagSuggest = $("#tagText").val();
  var url= "../operation/SuggestSupport!searchSuggest.action?documentTag.tagText="+tagSuggest+"&page=0&activePage=0";
  $.ajax({
     type: "POST",
     url: url,
     dataType:"json",
     success: function(data){
        var searchData = JSON.parse(data); 
        //search suggestions code
        $('.suggestion-wrap ul').empty();
        for (var i=0; i<searchData.length; i++) {
            $('.suggestion-wrap ul').append('<li>'+searchData[i]["name"]+'</li>');
        }
     },
     error: function (data){
       alert("Error");
     }
  });
});