2012-07-05 28 views
9

mój pełny kod jest tutaj: http://jsfiddle.net/HfNk9/13/jQueryUI autouzupełnianie - dane niestandardowe i wyświetlanie

szukam tego przykładu jqueryUi autocomplete - custom data and display.

Załóżmy projekty obiektów jest inny i wygląda to tak:

project = [ 
    { 
     name: 'bar', 
     value: 'foo', 
     imgage: 'img.png' 
    } 
] 

Jeżeli ustawić source = project Autouzupełnianie dotyczy project.value a nie project.name.
Jak zmienić to zachowanie?


var autocomplete = function(element, data) { 
    var fixtures = [ 
     { 
     avatar: "http://www.placekitten.com/20/20", 
     name: 'aaaaaaaaa', 
     value: 'bbbbbbbbb'} 
    ]; 

    element.autocomplete({ 
     minLength: 3, 
     source: function(request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
      response($.grep(fixtures, function(value) { 
       return matcher.test(value.name); 
      })); 
     }, 
     create: function() { 
      console.log(fixtures) 
      element.val(fixtures.name); 
     }, 
     focus: function(event, ui) { 
      element.val(ui.item.name); 
      return false; 
     }, 
     select: function(event, ui) { 
      element.val(ui.item.name); 
      return false; 
     } 
    }).data('autocomplete')._renderItem = function(ul, item) { 
     return $('<li></li>') 
      .data('item.autocomplete', item) 
      .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>') 
      .appendTo(ul); 
    }; 
}; 

autocomplete($('#auto')); 

mój pełny kod: http://jsfiddle.net/HfNk9/13/

Odpowiedz

11

Trzeba filtrować na innej nieruchomości niż widgetu autouzupełniania wyszuka domyślnie (jak zauważyłem to name lub value podczas korzystania z tablicy źródłowej z obiektami).

Można użyć funkcji zamiast tablicy jako źródła i wykonywać swoją filtrowanie w ten sposób:

element.autocomplete({ 
    minLength: 3, 
    source: function(request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     response($.grep(fixtures, function(value) { 
      return matcher.test(value.name); 
     })); 
    }, 
    create: function() { 
     console.log(fixtures) 
     element.val(fixtures.name); 
    }, 
    focus: function(event, ui) { 
     element.val(ui.item.name); 
     return false; 
    }, 
    select: function(event, ui) { 
     element.val(ui.item.name); 
     return false; 
    } 
}).data('autocomplete')._renderItem = function(ul, item) { 
    return $('<li></li>') 
     .data('item.autocomplete', item) 
     .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>') 
     .appendTo(ul); 
}; 

Przykład:http://jsfiddle.net/QzJzW/

+1

+1 Doskonałe wyjaśnienie. Dziękuję Ci bardzo. –

+0

Inna rzecz, tag "a" w renderowaniu jest konieczny, bez tego rzeczy takie jak metoda skupienia lub inne zawiodą (brak zestawu ui.item). – gpichot

+0

@andrewWhitaker ładnie wykonane Sir. – Bnjmn

0

Należy użyć właściwości select:

$("...").autocomplete({ 
    source: ..., 
    select: function(event, ui) { //when an item is selected 
     //use the ui.item object 
     alert(ui.item.name) 
     return false; 
    } 
}); 
+0

Dzięki, ja nie spróbować, ale to nie działa. Wysłałem swój pełny kod. –

+0

tutaj jest mój http://jsfiddle.net/HfNk9/13 –

0

Odpowiedź jest w kodzie źródłowym na stronie zostały powiązany. Jeśli chcesz użyć wartości name zamiast value wtedy można zrobić coś takiego:

$("#input").autocomplete({ 
    minLength: 0, 
    source: projects, 
    focus: function(event, ui) { 
     $("#input").val(ui.item.value); 
     return false; 
    }, 
    select: function(event, ui) { 
     $("#input").val(ui.item.value); 
     return false; 
    } 
}) 
.data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.name + "</a>") 
     .appendTo(ul); 
}; 
+0

Dzięki, spróbowałem, ale to nie działa. Wysłałem swój pełny kod. –

+0

Oto moje http://jsfiddle.net/HfNk9/13/ –

Powiązane problemy