2013-03-27 22 views
9

Mam następujący kod. Nie generuje żadnych błędów js. Nie może dostać Autouzupełnianie wyświetlać żadnych wyników:jquery autouzupełnianie renderItem

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

    } 
}); 

Jakieś pomysły co ja może brakować? Z góry dziękuję.

Odpowiedz

5

Domyślnie autouzupełnianie spodziewa macierzy źródło zawiera obiekty z obu nieruchomości label, właściwość value, lub obu.

Mając to na uwadze, masz dwie opcje:

  1. dodać etykietę lub mienia wartości do obiektów źródłowych podczas przetwarzania tablicy z rozmowy 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(); 
    

    The value ci Przypisanie zostanie użyte na focus, select i do wyszukiwania.

  2. zmienić funkcję source do wykonywania logiki zwyczaj filtrowania:

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

    Należy zauważyć, że z tej strategii trzeba realizować niestandardowe select i focus logiki.

Powiązane problemy