Funkcja autouzupełniania interfejsu jQuery pokazuje wartość zamiast etykiety w polu wejściowym

Question

Potencjalnie prosty problem z autouzupełnianiem interfejsu jQuery powoduje wstrząs. Moje źródło jest

var ac = [ 
    { 
     label: "One Thing", 
     value: "One-Thing" 
    }, 
    { 
     label: "Two Thing", 
     value: "Two-Thing" 
    },  
] 

jestem powołując widget z

$(function() { 
    $("#search").autocomplete({ 
     source: PK.getAutocompleteSource(), 
     focus: function(event, ui) { 
      $("#search").val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $("#search").val(ui.item.label); 
      PK.render(ui.item.value); 
     } 
    }); 
}); 

wszystko działa dobrze. Kiedy wpisuję pole wejściowe #search, pasująca etykieta pojawia się w menu rozwijanym, a kiedy I select jest wykonywane prawidłowe wyszukiwanie. Widżet pokazuje nawet pole wejściowe label w polu wejściowym , gdy zaznaczam różne elementy w liście rozwijanej za pomocą klawiszy strzałek (lub myszy). Z wyjątkiem tego, że zaraz po naciśnięciu klawisza Enter widżet wypełnia pole wejściowe #search za pomocą value zamiast label. Tak więc pole pokazuje One-Thing zamiast Jedna rzecz.

Jak mogę to poprawić? Z pewnością oczekuję bardziej rozsądnego zachowania, nie?

Answer 1

jeśli chcesz etykietę, aby mieć swoją wartość, po prostu źródłem być

var ac = ["One Thing", "Two Thing"]  

alternatywnie metoda select z Autouzupełnianie domyślną akcją jest umieszczenie obiektu value (jeśli podano) jako wartość swoich wkład. można również umieścić event.preventDefault() w wybranej funkcji i będzie można umieścić na etykiecie jako wartość (jak masz)

select: function(event, ui) { 
     event.preventDefault(); 
     $("#search").val(ui.item.label); 
     PK.render(ui.item.value); 
    } 

Answer 2

Jeśli chcesz, aby etykieta będzie twoja wartość w polu tekstowym onfocus I onSelect użyć tego kodu:

select: function(event, ui) { 
     $('#hiddenid').val(ui.item.value); 
     event.preventDefault(); 
     $("#search").val(ui.item.label); }, 

focus: function(event, ui) { 
     event.preventDefault(); 
     $("#search").val(ui.item.label);} 

Brakowało mi zdarzenia onFocus (tylko ustawienie zdarzenia onSelect). W ten sposób wartość była nadal wyświetlana w tekście wejściowym.

Answer 3

Wciąż miałem problem z klawiszami strzałek pokazującymi wartości. Tak więc faktycznie uznałem, że lepiej jest przypisać do etykiety zarówno wartość, jak i etykietę, a następnie umieścić wartość na trzeciej właściwości danych. Na przykład umieśćmy go na id.

var ac = [ 
    { 
     label: "One Thing", 
     value: "One Thing", 
     id: "One-Thing", 
    }, 
    { 
     label: "Two Thing", 
     value: "Two Thing", 
     id: "Two-Thing" 
    },  
] 

Następnie po użyciu wybierz zdarzenie, można uzyskać identyfikator z Ui:

select: function(event, ui) { 
    PK.render(ui.item.id); 
}