jQuery स्वत: पूर्ण - आइटम लेबल देखने लेकिन आइटम मूल्य

मैं पूरी तरह जावास्क्रिप्ट के लिए नया हूँ और शायद और अधिक की तुलना में मैं चबाना कर सकते हैं की काट रहा हूँ, लेकिन मैं jQuery autcomplete विजेट मेरी रेल साइट पर काम कर पाने के कोशिश कर रहा हूँ कैसे सबमिट करें।jQuery स्वत: पूर्ण - आइटम लेबल देखने लेकिन आइटम मूल्य

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

तो प्रश्न यह है कि व्यक्तियों का नाम एक बार चुने जाने के बाद, टेक्स्टबॉक्स में बने रहें, लेकिन एक बार सबमिट किए गए व्यक्ति आईडी सबमिट की जाती है।

रेल में, यह है कि कैसे मैं अपने व्यक्ति नियंत्रक से JSON डेटा की आपूर्ति कर रहा हूँ:

def index 
    if params[:term] 
    @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"], :limit => 5) 
    else 
    @people = Person.all 
    end 

    respond_to do |format| 
    format.html # index.html.erb 
    format.json { render :json => @people.to_json(:only => [:id, :given_name]) } 
    end 
end

ऊपर आउटपुट निम्नलिखित JSON टेक्स्ट:

[{"person":{"id":1,"given_name":"dale"}},{"person":{"id":2,"given_name":"sally"}},{"person":{"id":3,"given_name":"joe"}}]

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

मुझे लगता है कि मुझे जावास्क्रिप्ट में निर्दिष्ट करने की आवश्यकता है कि कौन सा लेबल दिखाना है और क्या मूल्य भेजना है। जैसा कि मुझे बस जावास्क्रिप्ट का लटका मिल रहा है, अगर आप समझा सकते हैं कि आपका उत्तर कैसे काम करता है तो इसकी सराहना की जाएगी। धन्यवाद।

स्रोत

2010-07-10 Oscar

सबसे अच्छा जवाब मैं साथ आ सकता हूं कि व्यक्ति की आईडी के लिए एक छिपी इनपुट फ़ील्ड बनाना है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" /> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
    <script> 
    $(document).ready(function(){ 
    // your data 
    var data = [{"person":{"id":1,"given_name":"dale"}},{"person":{"id":2,"given_name":"sally"}},{"person":{"id":3,"given_name":"joe"}}]; 


    $("#person_name").autocomplete(data, { 
     // formatting of choices in drop down 
     formatItem: function(item) { 
     return item.person.given_name; 
     }, 
     // format of choice in input field 
     formatResult: function(item) { 
     return item.person.given_name + " (" + item.person.id + ")"; 
     } 

     // when choice is made, update value of hidden field with the id 
    }).result(function(event, data, formatted) { 
     $("#person_id").val(data.person.id); 
    }); 
    }); 
    </script> 

</head> 
<body> 
    Select a person: <input id="person_name" /> (dale, sally, joe) 
    <input type="hidden" id="person_id"/> 
</body> 
</html>

स्रोत

2010-07-10 16:10:35

आपके उत्तर के लिए धन्यवाद। मुझे लगता है कि आपका समाधान काम करेगा, लेकिन मैं उम्मीद कर रहा था कि टेक्स्टबॉक्स में दिखाए गए एक से अलग मूल्य भेजने की क्षमता jQuery विजेट में बनाई जाएगी। ऐसा लगता है कि छिपे हुए क्षेत्र के बिना यह संभव होना चाहिए, लेकिन मैं कुछ समझ नहीं रहा हूं। यदि यह संभव नहीं है तो मैं छिपे हुए क्षेत्र समाधान के साथ रोल करूंगा। – Oscar

मैंने jQuery विजेट दस्तावेज़ों की फिर से समीक्षा की और आपका उत्तर सही है। टेक्स्टफील्ड में दिखाए गए एक से अलग मूल्य भेजने का तरीका (जैसे किसी व्यक्ति की आईडी में और व्यक्तियों का नाम नहीं चुना गया) एक छिपे हुए क्षेत्र के माध्यम से होता है। मुझे लगता है कि विजेट को छिपे हुए मूल्य की आपूर्ति करने की कोशिश करके मैं इसे बहुत जटिल बना रहा था। दस्तावेज़ों में उदाहरण स्पष्ट रूप से दिखाता है कि विजेट को एक छिपे हुए क्षेत्र के साथ संयोजन में उपयोग किया जाता है। धन्यवाद। – Oscar

यह स्वत: पूर्ण में बनाया गया है: जब आप एक नाम का चयन करें, परिणाम() फ़ंक्शन आईडी के साथ छिपे हुए इनपुट का मान अद्यतन करता है। इस प्रारूप में लोगों को रिटर्न डेटा की examples-- एक में से कुछ को देखो:

[{ 
    "id": "Ciconia ciconia", 
    "label": "White Stork", 
    "value": "White Stork2" 
}, 
{ 
    "id": "Platalea leucorodia", 
    "label": "Spoonbill", 
    "value": "Spoonbill" 
}]

आप अलग लेबल और मानों की आपूर्ति कर सकते हैं।

स्रोत

2010-07-11 00:09:34 Matt

तेजी से उत्तर के लिए धन्यवाद। आपने जो बताया है वह वह है जो मैं खोज रहा हूं, निर्मित सुविधा। क्या आपके पास इसे कार्यान्वित करने के बारे में कोई संकेत है? मैं गलत हो सकता था लेकिन दस्तावेज़ों से जो मैंने समझा, वह यह है कि "लेबल" ड्रॉपडाउन सूची में दिखाया गया है, और "लेबल" एक बार "लेबल" चयनित होने पर टेक्स्टफील्ड में संग्रहीत किया जाता है। एकमात्र चीज जो मैंने करने में कामयाब रहा है वह "लेबल" जैसे "लेबल" का चयन करें: "जो" जो टेक्स्ट फ़ील्ड में '4' (व्यक्ति आईडी) मान को संग्रहीत करता है। यह कार्यात्मक है, लेकिन बेवकूफ दिखता है क्योंकि कोई वास्तव में व्यक्ति आईडी को देखना नहीं चाहता है। इस पर कोई विचार? – Oscar

जैसा कि आपने सुझाव दिया था, बस jQuery विजेट पर दस्तावेज़ों की फिर से समीक्षा की गई, और मुझे लगता है कि मैंने अब आपके उत्तर और @ केन के उत्तर के बीच यह पता लगाया है। दस्तावेज़ों के अनुसार मैं ऊपर के रूप में अलग-अलग मान निर्दिष्ट कर सकता हूं, और उसके बाद एक छिपे हुए फ़ील्ड को मान खिला सकता हूं, जिसे तब मेरे रेल ऐप पर भेजा जाएगा। मुझे लगता है कि मैं इसे बहुत जटिल बना रहा था क्योंकि मैं किसी भी तरह से jQuery विजेट को छिपे हुए मूल्य की आपूर्ति करने की कोशिश कर रहा था, जब दस्तावेज़ों में उदाहरण स्पष्ट रूप से दिखाता है कि विजेट को एक छिपे हुए क्षेत्र के साथ संयोजन में उपयोग किया जाता है। धन्यवाद। – Oscar

(मैंने आपके उत्तर और @ केन दोनों उत्तरों को सही के रूप में चिह्नित करने का प्रयास किया लेकिन यह केवल एक चुनने देता है! आपके उत्तर ने मुझे सही दस्तावेज़ पर इंगित किया, लेकिन @ केन का मूल उत्तर दस्तावेज़ों का समाधान था।) – Oscar

jQuery स्वत: पूर्ण - आइटम लेबल देखने लेकिन आइटम मूल्य

उत्तर

संबंधित मुद्दे