How to add search suggestion on to ajax sucess

Question

I need to add search suggestion to a text box. I was trying many ways. But I couldn't find correct way. I get data(arraylist) from back end using ajax.Then return it to jsp as json. Now I need to add search suggestion function to according to ajax success. dataType of ajax success is 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");
      }
      });
});

This is my text box

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

I checked it. as a example when i type "S" letter it gives the words which are "S" is in middle. what I need is when I type a letter, suggestion words should start from that letter.. Is there eny possible way to do this?? — Mapa, Nov 07 '17 at 04:21

score 0 · Answer 1 · answered Nov 07 '17 at 05:11

You should let the div down to your HTML example:-

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

And you ajax should be like this:-

$("#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");
     }
  });
});

Firstly you should define your structure where you want to show your search data. ul and li is just an example where all the data is showing in a list. — Mohd Amir, Nov 07 '17 at 13:38

How to add search suggestion on to ajax sucess

1 Answers1