Ajax-Auto-Vervollständigung binden Daten an Textbox

Question

Am Erhalten von Daten von Ajax Anruf, wie Daten für Textfeld Auto-Vervollständigung mit Namen und ID als Felder zu binden.

Wie Sie die Daten im Frontend binden und die ID des ausgewählten Namens im Backend-Java abrufen.

$(document).ready(function() { 
$(function() { 
     $("#customerName").autocomplete({  
     source : function(request, response) { 
     $.ajax({ 
       url : "/customer/getByNames", 
       type : "GET", 
       data : { 
         name : $("#customerName").val() 
       }, 
       dataType : "json", 
       success : function(data) { 

       response(data); 
       } 
     }); 
} 
}); 
}); 
}); 

<input type="text" id="customerName" name="customerName" 
      th:field="*{customer.name}" /> 

JSON zurückgegebenen Daten von Ajax-Aufruf (Data at Sucess)

[ 
{"id": 1,"name": "Customer_01"}, 
{"id": 2,"name": "Customer_02"}, 
{"id": 3,"name": "Customer_03"}, 
{"id": 4,"name": "Customer_04"} 
] 

Need Namensfeld von JSON zu binden, wie die automatische Vervollständigung Textbox

Kann jemand mir helfen?

Answer 1

Sie können die Daten von Ihrem AJAX-Aufruf an eine Methode übergeben, um das Plug-in für die automatische Vervollständigung zu initialisieren.

Die Methode kann einen Namen für Selektoren haben, die initialisiert werden sollen. Wenn sich Ihre Selektoren in den Daten befinden, können Sie die Daten einem Array von Selektoren zuordnen, für die Sie eine automatische Vervollständigung erstellen möchten.

Wenn Ihre Daten ein spezielles Format haben, können Sie eine benutzerdefinierte Renderfunktion verwenden, um das Auto-Complete-Plugin zu initialisieren.

Zum Beispiel dieser ermöglicht es Ihnen, Gruppe Auto-Vervollständigen-Daten mit einer Kategorie und Feld in Gruppen mit diesem JSON-Set als formModel:

{ 
    "Contact":{ 
     "FirstName":"Contact.FirstName", 
     "MiddleInitial":"Contact.MiddleInitial", 
     "LastName":"Contact.LastName", 
     "Address1":"Contact.Address1", 
     "Address2":"Contact.Address2", 
     "City":"Contact.City", 
     "State":"Contact.State", 
     "PostalCode":"Contact.PostalCode", 
     "WorkPhone":"Contact.WorkPhone", 
     "HomePhone":"Contact.HomePhone", 
     "Email":"Contact.Email" 
    }, 

    "UDFs":{ 
     "ModifiedBy":"Contact.UDFs.ModifiedBy", 
     "ModifiedDate":"Contact.UDFs.ModifiedDate", 
     "SessionId":"Contact.UDFs.SessionId", 
     "FormData":"Contact.UDFs.FormData" 
    } 
} 

Ich benutze diesen Code:

function getFormModel() { 
     var availableTags = []; 
     for (var category in formModel) { 
      var fields = formModel[category]; 
      for (var field in fields) { 
       availableTags.push({ 
        category: category, 
        label: field, 
        value: fields[field] }); 
      } 

     } 
     return availableTags; 
    } 

function setAutoComplete(el) { 

     $(el).autocomplete({ 
      source: getFormModel(), 
      create: function() { 
       //access to jQuery Autocomplete widget differs depending 
       //on some jQuery UI versions - you can also try .data('autocomplete') 
       $(this).data('uiAutocomplete')._renderMenu = customRenderMenu; 
      } 
     }); 
    } 

var customRenderMenu = function (ul, items) { 
     var self = this; 
     var categoryArr = []; 

     function contain(item, array) { 
      var contains = false; 
      $.each(array, function (index, value) { 
       if (item == value) { 
        contains = true; 
        return false; 
       } 
      }); 
      return contains; 
     } 

     $.each(items, function (index, item) { 
      if (!contain(item.category, categoryArr)) { 
       categoryArr.push(item.category); 
      } 
      console.log(categoryArr); 
     }); 

     $.each(categoryArr, function (index, category) { 
      ul.append("<li class='ui-autocomplete-group'>" + category + "</li>"); 
      $.each(items, function (index, item) { 
       if (item.category == category) { 
        self._renderItemData(ul, item); 
       } 
      }); 
     }); 
    }; 

Answer 2

Finale Arbeits code:

$(document).ready(function() { 
    $(function() { 
     $("#customerName").autocomplete({ 
      source : function(request, response) { 
       $.ajax({ 
        url : "/customer/getByNames", 
        type : "GET", 
        data : { 
         name : $("#customerName").val() 
        }, 
        dataType : "json", 
        success : function(data) { 

         $("#customerName").autocomplete({ 
          source : data 
         }); 
        }, 
        appendTo: "#customerNameResult" 

       }); 
      } 

     }); 
    }); 
});