jQuery UI स्वत: पूर्ण इनपुट इनपुट क्षेत्र में लेबल के बजाय मूल्य दिखाता है

Question

jQuery UI स्वत: पूर्ण के साथ संभावित रूप से सरल समस्या मुझे रोक रही है। मेरे स्रोत

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

मैं

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

सभी ठीक काम करता है के साथ विजेट लागू कर रहा हूँ। जब मैं #search इनपुट फ़ील्ड में टाइप करता हूं, तो मेल खाने वाला लेबल ड्रॉपडाउन में दिखाई देता है, और जब मैं select सही खोज करता हूं। विजेट को #search इनपुट फ़ील्ड में भी दिखाता है क्योंकि मैं तीर कुंजियों (या माउस) का उपयोग करके ड्रॉपडाउन में अलग-अलग आइटम चुनता हूं। छोड़कर, जैसे ही मैंने प्रवेश किया, विजेट #search इनपुट फ़ील्ड valuelabel के बजाय भरता है। तो फ़ील्ड के बजाय एक-थिंग दिखाता है एक चीज।

मैं इसे कैसे ठीक कर सकता हूं? निश्चित रूप से जो मैं उम्मीद कर रहा हूं वह अधिक उचित व्यवहार है, नहीं?

Answer 1

यदि आप चाहते हैं कि आपके लेबल मूल्य होने के लिए, बस स्रोत

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

वैकल्पिक रूप से, आप पूर्ण हो की select विधि डिफ़ॉल्ट कार्रवाई value वस्तु (यदि निर्दिष्ट) डाल करने के लिए का मान के रूप में है, तो अपने इनपुट। आप यह भी चुन समारोह में event.preventDefault() डाल सकता है और (यदि आपके पास के रूप में) यह मान के रूप में लेबल डाल देंगे

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

Answer 2

आप अपने लेबल पाठ बॉक्स onFocus में अपने मूल्य होने के लिए और इस कोड का उपयोग onSelect चाहते हैं:

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

मैं ऑन फ़ोकस ईवेंट (केवल चयन ईवेंट को सेट करना) खो रहा था। इस प्रकार, पाठ इनपुट में मूल्य दिखाना जारी रखा।

Answer 3

मुझे अभी भी मूल्य दिखाने वाले तीर कुंजियों के साथ समस्या हो रही थी। तो मुझे वास्तव में लेबल में मूल्य और लेबल दोनों को असाइन करना बेहतर लगता है, और फिर डेटा की तीसरी संपत्ति पर मूल्य डाल दिया जाता है। उदाहरण के लिए चलिए इसे आईडी पर डाल दें।

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

फिर जब आप घटना का चयन का उपयोग करें, आप आईडी ui से प्राप्त कर सकते हैं:

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