Wyczyść pole formularza po wybraniu opcji autouzupełniania interfejsu użytkownika jQuery

97

Rozwijam formularz i używam autouzupełniania interfejsu użytkownika jQuery. Gdy użytkownik wybierze opcję, chcę, aby zaznaczenie pojawiło się w zakresie dołączonym do <p>tagu nadrzędnego . Następnie chcę, aby pole zostało wyczyszczone, a nie wypełnione zaznaczeniem.

Wydaje mi się, że rozpiętość jest w porządku, ale nie mogę oczyścić pola.

Jak anulować domyślną akcję wyboru funkcji autouzupełniania interfejsu użytkownika jQuery?

Oto mój kod:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Po prostu działanie $(this).val("");nie działa. Irytujące jest to, że prawie dokładna funkcja działa dobrze, jeśli zignoruję autouzupełnianie i po prostu podejmę działanie, gdy użytkownik wpisze przecinek jako taki:

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Prawdziwym rezultatem końcowym jest autouzupełnianie do pracy z wieloma zaznaczeniami. Jeśli ktoś ma jakieś sugestie, byłby mile widziany.

Jon F Hancock
źródło

Odpowiedzi:

182

Dodaj $(this).val(''); return false; na końcu swojej selectfunkcji, aby wyczyścić pole i anulować wydarzenie :)

Zapobiegnie to aktualizacji wartości. Możesz zobaczyć, jak to działa wokół linii 109 tutaj .

Kod w tym miejscu sprawdza, czy nie ma fałszu w szczególności:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}
Nick Craver
źródło
Fantastyczny! Ale czuję się głupio. Teraz już wiem, a wiedza to połowa sukcesu.
Jon F Hancock
Naprawiło to. Próbowałem się zgodzić, ale powiedział mi, że nie mogę dłużej przez 7 minut. Zaakceptowany. Dzięki.
Jon F Hancock
1
Dodam tylko, że gdy zwrócisz false, nie musisz już samodzielnie ustawiać wartości (tj. Nie ma potrzeby $(this).val('');)
Uri
9
Jeśli ktoś chce, aby pole wejściowe w ogóle nie zawierało żadnej wartości, uważam, że wywołanie .val('')musi nadal występować. return false;Zapobiegnie jedynie tekst zaznaczony element w pojawianiu się w polu wejściowym.
Ryan
1
Uri jest niepoprawny, a Ryan ma rację. Musisz zwrócić wartość false, aby zapobiec aktualizacji po dokonaniu wyboru, a dodatkowo potrzebujesz $ (this) .val (''), jeśli chcesz go wyczyścić.
mynameistechno
19

Zamiast zwracać false, możesz również użyć event.preventDefault ().

select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}
Paul Schröder
źródło
Podejrzewam, że ta metoda jest bardziej skuteczna niż przyjęta odpowiedź.
dlsso
6

return false jest potrzebne w wywołaniu zwrotnym wyboru, aby opróżnić pole. ale jeśli chcesz ponownie kontrolować pole, tj. ustawić wartość, musisz wywołać nową funkcję, aby wyrwać się z interfejsu użytkownika.

Być może masz szybką wartość, taką jak:

var promptText = "Enter a grocery item here."

Ustaw go jako wartość elementu. (skupiamy się na „”).

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}
captahab
źródło
Cześć, miałem inne pytanie dotyczące zapisywania monitu, z przyczyn technicznych nie mogę używać symboli zastępczych. To było idealne, DZIĘKUJĘ!
hgolov
5

To działa dobrze dla mnie.

Po wybraniu wydarzenia użyłem zmiany wydarzenia.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

Jestem początkujący!

Silvana Saly Viana
źródło
0

Spróbuj tego

select: function (event, ui) {
    $(this).val('');
    return false;       
}
ImBhavin95
źródło
0

Właśnie go rozwiązałem, zmuszając do utraty koncentracji:

$('#select_id').blur();
printResult();
Mireia Gimeno
źródło