Tworzenie widgetu Autouzupełnianie interfejsu jQuery * faktycznie * autouzupełnianie

Question

Potrzebuję autouzupełniania w aplikacji, nad którą pracuję, a ponieważ już korzystam z interfejsu jQuery, staram się, aby widżet autouzupełniania odpowiadał moim potrzebom.

Pierwszym krokiem jest sprawienie, aby wyszukiwany termin pasował tylko na początku sugerowanych terminów. Już to działa, jak widać w poniższym kodzie. Krok drugi polega na tym, że pierwsza propozycja jest w rzeczywistości autouzupełniania,.

Który prawdopodobnie wymaga trochę wyjaśnienia. Kiedy słyszę "autouzupełnianie", wyobrażam sobie, że wpisuję "f" i zmienię zawartość pola tekstowego na "foo", z zaznaczoną "oo", tak, że zostanie ona zastąpiona, jeśli wpiszesz inny znak i pozostawię w polu, jeśli Mam kartę z tego. Normalnie nazywałbym to, co sugeruje widżet autouzupełniania, a nie autouzupełnianie.

Patrząc na to, jak Autouzupełnianie działa wewnętrznie, uważam, że zdarzenie autocompleteopen jest właściwym miejscem do tego (jest wywoływane za każdym razem, gdy lista sugestii jest aktualizowana), ale nie mam pojęcia, jak uzyskać dostęp do sugestii listę z tego miejsca.

Jakieś myśli?

$("#field").autocomplete({ 
    delay: 0, 

    source: function filter_realms(request, response) { 
     var term = request.term.toLowerCase(); 
     var length = term.length; 

     response($.grep(candidates, function(candidate) { 
      return candidate.substring(0, length).toLowerCase() === term; 
     })); 
    }, 

    open: function(event, ui) { 
     // magic happens here? 
    } 
}); 

Answer 1

Mam to. Zapomniałem, że widżety można uzyskać przez .data().

$("#field").autocomplete({ 
    delay: 0, 

    source: function filter_realms(request, response) { 
     var term = request.term.toLowerCase(); 
     var length = term.length; 

     response($.grep(candidates, function(candidate) { 
      return candidate.substring(0, length).toLowerCase() === term; 
     })); 
    }, 

    open: function(event, ui) { 
     var current = this.value; 
     var suggested = $(this).data("autocomplete").menu.element.find("li:first-child a").text(); 

     this.value = suggested; 
     this.setSelectionRange(current.length, suggested.length); 
    } 
}); 

Answer 2

Zajęto część sprawdzania długości i zmodyfikowano funkcję filtra w wyszukiwaniu. W ten sposób możesz skorzystać z obsługi JSON interfejsu użytkownika.

filter: function(array, term) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i"); 

    var smatcher = term.toLowerCase(); 
    var length = smatcher.length; 


    return $.grep(array, function(value) { 
       if(value.label.substring(0, length).toLowerCase() == smatcher){ 
        return matcher.test(value.label || value.value || value); 
       } 
    });