jQuery UI otomatik tamamlama, giriş alanında etiket yerine değer gösterir

Question

JQuery UI otomatik tamamlama ile potansiyel olarak basit bir sorun beni güldürüyor. Kaynağım ben tüm iyi çalışır

$(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); 
     } 
    }); 
}); 

ile widget'ı yürütmesini

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

olduğunu. #search giriş alanına yazdığımda, eşleşen etiket açılır menüde görünür ve I select doğru arama gerçekleştirilir. Widget, #search giriş alanına label giriş alanında, ok tuşlarını (veya fareyi) kullanarak açılır menüden farklı öğeleri seçerken bile gösterir. Hariç tuttuğum anda, widget #search giriş alanını label yerine value ile doldurur. Bu yüzden alan One Thing yerine One-Thing gösterir.

Bunu nasıl düzeltebilirim? Elbette beklediğim şey daha mantıklı davranış, değil mi? Eğer değer olmasını etiketi istiyorsanız

Answer 1

, sadece kaynak alternatif

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

, varsayılan eylem değeri olarak (belirtilmişse) value nesneyi koymaktır tamamlar arasında select yöntem var senin giriş. Ayrıca seçme işlevinde event.preventDefault() koyabilirsiniz ve (eğer varsa gibi) etiket metin kutusuna onFocus daki değer olması VE bu kodu kullanmak onSelect istiyorsanız o değeri olarak

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

Answer 2

etiketi koyacağız:

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);} 

OnFocus olayını kaçırıyordum (sadece onSelect olayını ayarlama). Böylece, metin girişinde göstermeye devam etti.

Answer 3

Değerleri gösteren ok tuşları ile hala bir sorunum vardı. Bu yüzden, hem değerin hem de etiketin etikete atanmasını daha iyi buldum ve ardından değeri verilerin 3. özelliğine koydu. Örneğin, onu id olarak atalım. Eğer select olayı kullandığınızda

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

Ardından, ui gelen kimliği alabilirsiniz:

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