jQuery UI autouzupełnianie Niestandardowe źródła, zamiast String Array

Question

Używam jQueryUI autouzupełniania i zastanawiam się, jak korzystać z niestandardowego obiektu w moim źródle danych (tj Chcę przekazać z powrotem listę następujących typów):

public class Tag 
{ 
    public string Name { get; set; } 
    public int Count { get; set; } 
} 

Kod autouzupełnianie, że jestem obecnie za pomocą (i to działa dobrze, kiedy przechodzą z powrotem prosto do przodu ciąg tablicę nazw) jest prawie kopią off stronie jQuery UI:

$(function() { 
     function split(val) { 
      return val.split(/ \s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#tags") 
     // don't navigate away from the field on tab when selecting an item 
     .bind("keydown", function (event) { 
      if (event.keyCode === $.ui.keyCode.TAB && 
        $(this).data("autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      source: function (request, response) { 
       $.getJSON("Home/GetTag", { 
        term: extractLast(request.term) 
       }, response); 
      }, 
      search: function() { 
       // custom minLength 
       var term = extractLast(this.value); 
       if (term.length < 1) { 
        return false; 
       } 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function (event, ui) { 
       var terms = split(this.value); 
       // remove the current input 
       terms.pop(); 
       // add the selected item 
       terms.push(ui.item.value); 
       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(" "); 
       return false; 
      } 
     }); 
    }); 

Jedyną rzeczą Zmieniłem z oryginalnego źródła demo jest Url i jestem podziału na spacja zamiast przecinka (dla wielu autouzupełnień).

Oto HTML:

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags"/> 
</div> 

Idealnie chcę przedstawić użytkownikowi listę nazwisk, z odpowiednią liczbę obok.

Answer 1

jak użyć niestandardowego obiektu w moim źródle danych

trzeba formatować dane w taki sposób, że widżet spodziewa. Musisz mieć właściwość label lub właściwość value (lub obie) w każdym obiekcie w tablicy wyników, aby widget wyświetlał wyniki. Możesz dołączyć inne dane do obiektu, o ile spełnia te wymagania.

Aby sformatować dane pochodzące z serwera, konwencja jest użycie $.map:

source: function (request, response) { 
    $.getJSON("Home/GetTag", { 
     term: extractLast(request.term) 
    }, function (data) { 
     response($.map(data, function (item) { 
      return { 
       value: item.Name, 
       count : item.Count 
      }; 
     }); 
    }); 
}, 

(Nietestowane)

ten powinien otrzymać wyniki wypełniania dla Ciebie. To idzie w parze z drugą częścią twojego pytania:

Idealnie, chciałbym przedstawić użytkownikowi listę nazw wraz z odpowiednią liczbą obok.

to dość łatwo zrobić, po this demo jako przewodnika:

$("#auto").autocomplete({ ... }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br />" + item.count + "</a>") 
      .appendTo(ul); 
    }; 

można zastąpić funkcję _renderItem, aby wyświetlić cokolwiek chcesz, tak długo, jak jest to li że zawiera a tag i posiada dane item.autocomplete.

Połączyć te dwie strategie i powinieneś być w biznesie. Dla przykładu wykonania tego, sprawdź przykładowe tutaj: http://jsfiddle.net/andrewwhitaker/UvegL/

Przykład ten łączy zdalnego źródła danych i danych niestandardowych & wyświetlacza. Mam nadzieję, że to pomoże, mimo że połączenie AJAX jest nieco inne.