JQuery यूआई स्वत: पूर्ण - कैसे इनपुट पाठ में किसी आइटम का चयन और लेबल (नहीं मान) mantain करने

मैं डेटा स्रोत एक के रूप में प्रयोग JQuery यूआई स्वत: पूर्ण प्लगइन (click to see the demo page of JQuery UI Autocomplete plugin)JQuery यूआई स्वत: पूर्ण - कैसे इनपुट पाठ में किसी आइटम का चयन और लेबल (नहीं मान) mantain करने

मैं प्रयोग करने की कोशिश bellow के रूप में वस्तुओं की सूची:

  var availableTags = [ 
       {label: "Sao Paulo", value: "SP"}, 
       {label: "Sorocaba", value: "SO"}, 
       {label: "Paulinia", value: "PA"}, 
       {label: "São Roque", value: "SR"} 
      ];

समस्या यह है कि जब मैं किसी आइटम का चयन, डेटा स्रोत का मूल्य इनपुट क्षेत्र पर सेट है और नहीं लेबल है। मैंने आइटम के मूल्य को एक छिपे हुए क्षेत्र में सहेजने के लिए चयन करने के लिए एक हैंडल बनाया है और लेबल को इनपुट फ़ील्ड में सेट किया है, लेकिन प्लगइन द्वारा यह ईवेंट बहुत जल्द निकाल दिया गया है और मान इनपुट फ़ील्ड पर फिर से सेट किया गया है।

HTML:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" />  
     <link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" />  
     <style> 
      .ui-menu-item 
      { 
       font-size: 12px; 
      } 
     </style> 
     <script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script> 
     <script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var availableTags = [ 
        {label: "Sao Paulo", value: "SP"}, 
        {label: "Sorocaba", value: "SO"}, 
        {label: "Paulinia", value: "PA"}, 
        {label: "São Roque", value: "SR"} 
       ]; 

       $("#txtCidade").autocomplete({ minLength: 0, 
               source: availableTags);  
      }); 

      function OnSelect(event, ui) 
      { 
       var item = ui.item; 
       var itemLabel = item.label; 
       var itemValue = item.value; 

       $("#hidCidade").val(itemValue); 
       $("#txtCidade").val(itemLabel); 
      } 

     </script> 
    </head> 
    <body> 
     <form> 
      <input id="hidCidade" type="hidden" /> 
      <input id="txtCidade" type="input" class="ui-autocomplete-input" /> 
     </form> 
    </body> 
</html>

कृपया, किसी ने मुझे इस के साथ मदद कर सकता है?

धन्यवाद!

स्रोत

2012-03-19 outlookrperson

मैंने ऑनफोकस और ऑनसेलेक्ट के लिए हैंडलर बनाने और प्रत्येक में झूठी वापसी के मुद्दे को हल किया है।

 function OnFocus(event, ui) 
     { 
      $("#txtCidade").val(ui.item.label); 
      return false; 
     } 

     function OnSelect(event, ui) 
     { 
      var item = ui.item; 
      var itemLabel = item.label; 
      var itemValue = item.value; 
      var campo = $("#txtCidade"); 

      $("#hidCidade").val(itemValue); 
      $("#txtCidade").val(itemLabel); 

      var campoValue = campo.val(); 
      var hidCampoValue = $("hidCidade").val(); 
      return false; 
     }

स्रोत

2012-03-19 19:46:22 outlookrperson

निम्नलिखित करने के लिए अपने स्वत: पूर्ण कॉल बदलें:

$("#txtCidade").autocomplete({ 
    source: availableTags, 
    select: function(event, ui) { 
     $("#hidCidade").val(ui.item.label); 
    } 
});

#txtCidade स्वचालित रूप से चयनित लेबल pckup चाहिए जब एक स्वत: पूर्ण आइटम पर क्लिक किया जाता है।

jsFiddle example देखें।

स्रोत

2012-03-19 15:02:51 j08691

यह काम नहीं करता है! – outlookrperson

इसके बारे में क्या काम नहीं करता है? – j08691

क्षमा करें @ j08691, लेकिन मुझे लगता है कि आपने सही ढंग से प्रश्न को नहीं समझा। जेएसफ़िडलर में आपके द्वारा प्रदान किए गए कोड का उपयोग करके, एक विकल्प का चयन करके, टेक्स्ट (लेबल नहीं) टेक्स्टबॉक्स फ़ील्ड में दिखाई देगा। – outlookrperson

चूंकि मुझे इसे भी हल करना पड़ा था। मैंने सोचा कि मैं अपना समाधान दिखाऊंगा। IMHO यह क्लीनर है क्योंकि आपको अलग ऑनसेलेक्ट और ऑनफोकस फ़ंक्शंस की आवश्यकता नहीं है। (हालांकि यह वास्तव में वही काम करता है जैसा कि रास्पर्स ने किया है)

$('#txtCidade').autocomplete({ 
    source: availableTags, 
    focus: function(event, ui) { 
    $(this).val(ui.item.label); 
    return false; 
    }, 
    select: function(event, ui) { 
    $('#hidCidade').val(ui.item.value); 
    $(this).val(ui.item.label); 
    return false; 
    } 
});

स्रोत

2012-11-21 05:25:57 snorris

इसे प्यार करो! यह सही और आसान था। :) – gregthegeek

वापसी झूठी सभी अंतर बनाता है :) – 2ni

JQuery यूआई स्वत: पूर्ण - कैसे इनपुट पाठ में किसी आइटम का चयन और लेबल (नहीं मान) mantain करने

उत्तर

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