jQuery UI स्वत: पूर्ण हाइब्रिड टेक्स्ट/आईडी खोज

Question

मुझे jQuery के स्वत: पूर्ण विजेट को मेरे लिए काम करने में बहुत परेशानी हो रही है। मैं एक सर्वर से कुंजी/मूल्य जोड़े की एक सूची का उपयोग कर रहा हूँ। उपयोगकर्ता विजेट से कोई मान का चयन करता है

हैं, मैं सर्वर से आईडी पास करना चाहते हैं:

मैं निम्नलिखित आवश्यकताओं है।

यदि उपयोगकर्ता कोई मान नहीं चुनता है और कच्चे पाठ में प्रवेश करता है, या पहले से ही चुना गया मान संशोधित करता है, तो मैं चाहता हूं कि आईडी फ़ील्ड को साफ़ किया जाए और केवल कच्चे पाठ को सर्वर पर भेजा जाए।

मान लें कि someAjaxFunction ऑब्जेक्ट्स की एक सरणी देता है जो स्वत: पूर्ण विजेट अपेक्षा करता है: {label:label, value:key}। , यहां तक ​​कि वस्तुओं में से एक पर मँडरा अंतर्निहित कुंजी करने के लिए $ (इनपुट) द्वारा संदर्भित पाठ बॉक्स में पाठ में परिवर्तन द्वारा

$(input).autocomplete({ 
    source: sourceFunction, 
    minLength: 1 
}); 

चयन बदलना:

शुरू में मैं सेट स्वत: पूर्ण इसलिए तरह विजेट लेबल के बजाए। यह एक उपयोगकर्ता इंटरैक्शन दृष्टिकोण से बेहद अवांछनीय है - असल में, मैं इसकी जांच क्यों कर रहा हूं इसका कारण यह है कि जिस साइट पर मैं निर्माण कर रहा हूं, उसके उपयोगकर्ता लगातार उस पाठ द्वारा परेशान थे जो वे यादृच्छिक संख्या में बदल रहे थे!

मैं पाठ बॉक्स के तहत एक छिपी हुई फ़ील्ड जोड़ा गया है और) का चयन कार्यान्वित (और ध्यान() की घटनाओं के क्रम इतना की तरह आईडी क्लोक करने के लिए:

$(input).autocomplete({ 
    source: sourceFunction, 
    minLength: 1 
    focus: function(event, ui) { 
     $(idField).val(ui.item.value); 
     $(this).val(ui.item.label); 
     return false; 
    }, 
    select: function(event, ui) { 
     $(idField).val(ui.item.value); 
     $(this).val(ui.item.label); 
     return false; 
    }, 
    minLength: 1 
}); 

यह अच्छी तरह से काम करता है जब उपयोगकर्ता के लिए चिपके हुए है स्वत: पूर्ण ड्रॉप-डाउन द्वारा प्रदान की गई स्क्रिप्ट। आईडी क्लोक किया गया है और सर्वर पर सही ढंग से सबमिट किया गया है। दुर्भाग्यवश, यदि उपयोगकर्ता बॉक्स में कुछ फ्रीफॉर्म टेक्स्ट दर्ज करना चाहता है और उस मान के आधार पर खोज, आईडी फ़ील्ड रीसेट नहीं है और पहले चयनित आईडी सर्वर पर सबमिट हो जाती है। यह भी भ्रमित है।

jQuery यूआई स्वत: पूर्ण प्रलेखन एक change घटना को सूचीबद्ध करता है और कहा गया है ui तर्क के item संपत्ति चयनित आइटम पर निर्धारित किया जाएगा कि। मैंने सोचा कि मैं छिपी हुई आईडी फ़ील्ड को एक कुंजी प्रेस पर रीसेट कर सकता हूं और स्वत: पूर्णता बदलकर आईडी को फिर से पॉप्युलेट कर सकता हूं। दुर्भाग्यवश, कीप्रेस घटना के अलावा, को को आईडी को रीसेट नहीं करना चाहिए, return false उपरोक्त select ईवेंट में स्टेटमेंट को टेक्स्ट बॉक्स में टेक्स्ट प्रबंधित करने के लिए जरूरी है, change ईवेंट को ui होने से रोकता है सही ढंग से असाइन किया गया।

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

मैं इसके लिए कवर करने के लिए सर्वर की ओर कुछ हैक्स जोड़ सकता हूं, लेकिन मैं वास्तव में क्लाइंट स्तर पर ऐसा करने में सक्षम होना पसंद करूंगा।

मैं किसी अन्य पर स्विच करने के बजाय jQuery UI स्वत: पूर्ण विजेट से चिपकना पसंद करूंगा।

Answer 1

जिस तरह से मैं स्वतः पूर्ण कर रहा हूं, इनपुट युक्त एक कंटेनर div बनाना है।जब मैं कोई तत्व चुनता हूं, तो मैं कंटेनर में एक अवधि वाला एक लिंक जोड़ता हूं, और मैं इनपुट बॉक्स को छुपाता हूं।

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

<div class="container"> 
    <a href="#"><span>Selected Item</span></a> 
    <input id="myautocomplete" type="text" /> 
    <input type="hidden" name="myvalue" value="1" /> 
    </div> 

और एक आइटम का चयन नहीं किया गया है जब:

<div class="container"> 
    <input id="myautocomplete" name="myautocomplete" type="text" /> 
    <input id="myvalue" name="myvalue" type="hidden" value="" /> 
    </div> 

इस तरह, आप या तो किसी आइटम का चयन करने के लिए मजबूर कर रहे हैं, या आप मुक्त रूप पाठ दर्ज करें। बैकएंड पर, यदि कुंजी 'myvalue' के साथ अनुरोध पैरामीटर खाली है, तो आप कुंजी 'myautocomplete' के साथ अनुरोध पैरामीटर देखेंगे।

Answer 2

जब मैं अनुमान आप निम्नलिखित क्षेत्रों की स्थापना की है:

<div> 
    <input type="text" name="visible" class="autocomplete-reference" /> 
    <input type="hidden" name="hidden" /> 
</div> 

आप निम्न js (यह jQuery 1.5.2 के साथ काम करता है) init की जरूरत है:

$(document).ready(function() { 
    $('.autocomplete-reference').each(function() { 
     $(this).keydown(function(e){ 
      /* 
      * this will reset hidden id reference on each visible field manual change 
      * we have to bind it on keydown because we want to recognize event of submiting form by enter after autocomplete set 
      */ 
      if (e.keyCode != 13) { 
       $(this).siblings('input[type=hidden]').each(function() { 
        $(this).val(''); 
       }); 
      } 
     }); 
     $(this).autocomplete({ 
      minLength: 1, 
      /* you can set appending of autocomplete menu into some container to set css contextually 
      appendTo: '#someElem',*/ 
      source: sourceFunction, 
      search:function (event, ui) { 
       //TODO ...spinner init... 
      }, 
      open:function (event, ui) { 
       /* you can grab autocomplete menu widget by this to manipulate some recognizing id, etc.. 
       * $(this).autocomplete('widget') 
       */ 
       //TODO ..stop spinner ... 
       $(this).keydown(function(e){ 
        /* this is important for live reference updates while arrow keys changes */ 
        if (e.keyCode == 37 || e.keyCode == 39) { 
         $($(this).data('autocomplete').menu.active).find('a').trigger('click'); 
        } 
       }); 
      }, 
      focus: function(event, ui) { 
       /* here we'll map our data object onto both fields */ 
       $(this).val(ui.item.label); 
       $(this).siblings('input[type=hidden]').each(function() { 
        $(this).val(ui.item.key); 
       }); 
      }, 
      select: function(event, ui) { 
       /* here we'll map our data object onto both fields */ 
       $(this).val(ui.item.label); 
       $(this).siblings('input[type=hidden]').each(function() { 
        $(this).val(ui.item.key); 
       }); 
      }, 
      close: function(event, ui) { 
       //TODO ..stop spinner ... 
      } 
     }); 
    }); 
}); 

यह कुछ है करने के लिए बहुत अच्छा है सर्वरसाइड सत्यापन जो सटीक रूप से परिवर्तित कर सकता है: पाठ्यक्रम के त्वरित टाइपिंग लोगों के संदर्भ में दृश्य फ़ील्ड मान संदर्भों में।

Answer 3

हालांकि यह एक पुराना सवाल है, मेरी विधि मदद कर सकती है।

.change ईवेंट पर आप लूप का उपयोग करके अपनी स्रोत सूची से मूल्य के साथ टेक्स्टबॉक्स मान खोज सकते हैं।

गोटो अधिक जानकारी के लिए: यहां यह अजाक्स स्रोत सूची में है लेकिन कसरत समान है। Search a text In Jquery AutoComplete Ui

यह बात कई बार मुझे परेशान कर दिया गया था और अंत में अब मैं यह समझ से बाहर :)

Answer 4

आप event.preventDefault उपयोग कर सकते हैं

ui.item.label के माध्यम से अपने चुने गए मानों इकट्ठा या ui.item.value और आवश्यक मान प्राप्त करें और इसे उसी टेक्स्टबॉक्स पर सेट करें।

var idNameCombo = ui.item.label; 
      event.preventDefault(); 
      $("#mID").val(idNameCombo.split(",")[0].trim());