Dodawanie wartości do autouzupełniania jQuery w czasie rzeczywistym

Question

Robię pole wyboru "wprowadzenie znacznika" z autouzupełnianiem (użytkownik wpisuje coś, wybiera odpowiedź, która dodaje "token" do widoku DOM).

Korzystanie z autouzupełniania jQuery, czy istnieje sposób dodawania wartości, których nie ma na liście source po wpisaniu przez użytkownika? Na przykład, źródło wygląda na ["Apples", "Oranges", "Bananas"]. Użytkownik używa "plums," podczas korzystania z pola tekstowego. Czy istnieje sposób, aby dodać "Śliwki" do listy źródeł, jeśli użytkownik tego życzy? Wiem, że zdarzają się zdarzenia select i , które można sprawdzić, ale select działa tylko wtedy, gdy jest coś do wyboru (nie ma w tym przypadku), a change wymagałoby pewnego rodzaju sprawdzenia limitu czasu, aby sprawdzić, czy użytkownik przestał pisać.

Czy istnieje inna wtyczka, której można użyć do wykonania tego zachowania?

Answer 1

To powinno działać poprawnie z wydarzeniem zmiany autocomplete. Ten kod zakłada istnienie przycisku o identyfikatorze add, który pojawia się, gdy chcesz dodać nowy element do listy. Nie pojawi się, jeśli użytkownik wybierze element z listy. Istnieje kilka poprawek, które mogą być wykonane, ale to dowód koncepcji powinny umożliwić:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      response($.ui.autocomplete.filter(source, request.term)); 
     }, 
     change: function (event, ui) { 
      $("#add").toggle(!ui.item); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

Oto przykład: http://jsfiddle.net/rmGqB/

---

Aktualizacja: Brzmi jak ja lekko niezrozumiany wymogu. Można również wykorzystać w wyniku czego autouzupełnianie by zapełnić listę kandydatów z i jechać widoczności przycisku na podstawie tego, czy wyniki wyszukiwania przyniosły żadnych dokładnych mecze:

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      var result = $.ui.autocomplete.filter(source, request.term); 

      $("#add").toggle($.inArray(request.term, result) < 0); 

      response(result); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

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

Answer 2

Odpowiedź udzielona przez Andrew powoduje, że przycisk DODAJ NOWĄ pozostaje, nawet jeśli użytkownik wybierze istniejący element z tablicy zamiast dodawać "nowy" !!!

Zamiast włączonego przełącznika na przycisku "dodaj", istnieje wbudowana funkcja autouzupełniania, która może być używana.

Chociaż "Zmiana" czeka, aż pole tekstowe straci ostrość, może to być lepszy interfejs, aby następnie pokazać PRZYCISK ADD, jeśli nie pasuje do tablicy. (lub może utworzyć "potwierdzenie" dodania).

Zobacz alternatywny kod, który ponownie ukrywa przycisk "Dodaj", jeśli użytkownik wybierze z tablicy. Coś, co rozwiązanie Andrew Whitaker nie robi:

$(function() { 

    var source = ["Apples", "Oranges", "Bananas"]; 

    $("#auto").autocomplete({ 
    source: function (request, response) { 
     var result = $.ui.autocomplete.filter(source, request.term); 


     response(result); 
    }, 
    change: function(event, ui) { 
     var $label = $(this); 
     // figure out the id of hidden input box from label id 
     var $id = $('#'+this.id.replace('label_','id_')); 
     if (ui.item === null && $label.val() != ''){ 
     $("#add").show();    
     } 
     if(ui.item != null && $label.val() != ''){ 
     $("#add").hide();    
     } 
    } 
    }); 

    $("#add").on("click", function() { 
    source.push($("#auto").val()); 
    $(this).hide(); 
    }); 

}); 

Zobacz moją poprawioną Fiddle w działaniu - http://jsfiddle.net/VLLuJ/25/

Answer 3

Stare pytanie, ale przydatny odpowiedź:

Aby zaktualizować źródło autouzupełniania, użyj setter:

$ ("# auto").autouzupełnianie ("opcja", "źródło", ["Jabłka", "pomarańcze", "banany", "śliwki"]);

Zobacz http://api.jqueryui.com/autocomplete/#option-source