jquery autocomplete renderItem

Ho il seguente codice. Non genera alcun js errori. Non può ottenere il completamento automatico per visualizzare tutti i risultati:

$(function() {
    $.ajax({
    url: "data.xml",
    dataType: "xml",
    cache: false,
    success: function (xmlResponse) {
        var data_results = $("Entry", xmlResponse).map(function () {
            return {
                var1: $.trim($("Partno", this).text()),
                var2: $.trim($("Description", this).text()),
                var3: $.trim($("SapCode", this).text()),
                var4: $("Title", this).text(),
                var5: $.trim($("File", this).text()),
                var6: $.trim($("ItemID", this).text())
            };
        }).get();

        $("#searchresults").autocomplete({
            source: data_results,
            minLength: 3,
            select: function (event, ui) {
                ...
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" ).data("item.autocomplete", item)
                    .append( "<a>" + item.var1 + "<br>" + item.var2 + "</a>")
                    .appendTo( ul );
        };

    }
});

Tutte le idee che cosa potrei mancare? Grazie in anticipo.

InformationsquelleAutor Esteban | 2013-03-27



2 Replies
  1. 7

    Per impostazione predefinita, la funzionalità di autocompletamento si aspetta che la matrice di origine per contenere oggetti con un label proprietà, un value di proprietà, o di entrambi.

    Con questo in mente, si hanno due opzioni:

    1. Aggiungere un’etichetta o di proprietà di valore per i vostri oggetti di origine quando si elabora l’array dalla vostra chiamata AJAX:

      var data_results = $("Entry", xmlResponse).map(function () {
          return {
              var1: $.trim($("Partno", this).text()),
              var2: $.trim($("Description", this).text()),
              var3: $.trim($("SapCode", this).text()),
              var4: $("Title", this).text(),
              var5: $.trim($("File", this).text()),
              var6: $.trim($("ItemID", this).text()),
              value: $.trim($("Description", this).text())
          };
      }).get();

      Il value si assegna verrà utilizzato su focus, select, e per la ricerca.

    2. Modificare il source funzione per eseguire il filtro personalizzato logica:

      $("#searchresults").autocomplete({
          source: function (request, response) {
              var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      
              response($.grep(data, function (value) {
                  return matcher.test(value.var1) || 
                         matcher.test(value.var2);
                  /* etc., continue with whatever parts of the object you want */
              }));
          },
          minLength: 3,
          select: function (event, ui) {
              event.preventDefault();
              this.value = ui.var1 + ui.var2;
          },
          focus: function (event, ui) {
              event.preventDefault();
              this.value = ui.var1 + ui.var2;
          }
      }).data( "autocomplete" )._renderItem = function( ul, item ) {
              return $( "<li></li>" ).data("item.autocomplete", item)
                  .append( "<a>" + item.var1 + "<br>" + item.var2 + "</a>")
                  .appendTo( ul );
      };

      Notare che con questa strategia, è necessario implementare personalizzato select e focus logica.

Lascia un commento