jQueryUI स्वत: पूर्ण 'का चयन करें' माउस क्लिक पर काम नहीं करता है, लेकिन महत्वपूर्ण घटनाओं पर काम करता है

Question

जे एस/JQuery:

$this.find('input').autocomplete({ 
    source: "/autocomplete_tc_testcasename", 
    minLength: 2, 
    focus: function(e,ui){ 
     $(this).val(ui.item.label); 
     return false; 
    }, 
    select: function(e, ui) { 
     console.log("Selected: "+ui.item.value); 
    }  
}); 

सीएसएस:

 .ui-autocomplete { 
      max-height: 200px; 
      overflow-y: auto; 
      padding: 5px; 
     } 
     .ui-menu { 
      list-style: none; 
      background-color: #FFFFEE; 
      width: 50%; 
      padding: 0px; 
      border-bottom: 1px solid #DDDDDD; 
      border-radius: 6px; 
      -webkit-box-shadow: 0 8px 6px -6px black; 
      -moz-box-shadow: 0 0px 0px -0px black; 
      box-shadow: 0px 2px 2px 0px #999999; 
     } 
     .ui-menu .ui-menu { 
     } 
     .ui-menu .ui-menu-item { 
      color: #990000; 
      font-family:"Verdana"; 
      font-size: 12px; 
      border-top: 3px solid #DDDDDD; 
      background-color: #FFFFFF; 
      padding: 10px; 
     } 

समस्या का सारांश:

• AJAX ठीक काम करता है, मैं स्वत: पूर्ण मेनू में सभी प्रविष्टियों को सही ढंग से प्राप्त करता हूं।
• मैं मेनू आइटम का चयन करने के लिए कुंजी अप/डाउन तीरों का उपयोग करने में सक्षम हूं और एक बार जब मैं वापसी करता हूं, तो ईवेंट को सही ढंग से निकाल दिया जाता है और कंसोल संदेश प्रदर्शित होता है।
• मैं ui-menu-आइटम्स पर सफलतापूर्वक ध्यान केंद्रित कर सकता हूं और इनपुट टेक्स्ट के मूल्य को बदलने के लिए ईवेंट पर माउस को कैप्चर कर सकता हूं।
• मैं मेनू आइटम पर क्लिक करने और एक चुनिंदा घटना को आग लगाना प्रतीत नहीं कर सकता। यानी जब मैं मेनू आइटम पर क्लिक करता हूं, तो कंसोल संदेश कभी प्रदर्शित नहीं होता है।
• ऐसा लगता है कि क्लिक ईवेंट मेनू को खारिज कर रहा है और वास्तव में एक चुनिंदा घटना को फायर करने के बजाय इसे बंद कर रहा है। इस मुद्दे को कैसे प्राप्त करें इस पर कोई विचार है?
• मैंने इनपुट के पैरेंट div के बजाय "संलग्न करें: $ this" की कोशिश की, और फिर माउस क्लिक ठीक काम करता है! - घटना का चयन निकाल दिया जाता है और कंसोल संदेश सफलतापूर्वक प्रदर्शित होता है। लेकिन यह वही नहीं है जो मैं चाहता हूं क्योंकि मेनू को मूल div के भीतर जोड़ा गया है जो यूआई को विकृत करता है क्योंकि वे संभवतः एक ही जेड-इंडेक्स साझा करते हैं। यहां तक ​​कि यदि मैं इस मामले में जेई-इंडेक्स को एक higehr संख्या में बदलता हूं, तो इससे काफी मदद नहीं मिली। तो मैं एक ऐसे समाधान की तलाश में हूं जहां मेरे पास ऐपेंड का उपयोग करने के लिए 'है' यदि संभव हो तो।

मुझे बॉलपार्क में कई अन्य प्रश्न मिलते हैं, लेकिन इनमें से कोई भी मेरे प्रश्न को संबोधित नहीं कर रहा है।

jQuery Autocomplete - Left Mouse Click not firing Select event

jQuery UI autocomplete select event not working with mouse click

धन्यवाद!

Answer 1

मेरे पास एक ही समस्या है, लेकिन मेरे मामले में यह और भी अजीब है। चुनिंदा घटना हर दूसरी बार निकाल दी जाती है (माउस का उपयोग करते समय)। मेरे लिए चुनिंदा घटना भी ठीक है, अगर मैं अपने कीबोर्ड का उपयोग करता हूं तो ठीक है।

दुर्भाग्यवश मैं इस मुद्दे को jsfiddle के माध्यम से पुन: पेश नहीं कर सका। लेकिन मैं अभी भी अपने jsfiddle की पेशकश करना चाहता हूं, शायद यह आगे विश्लेषण के लिए एक अच्छा प्रारंभिक बिंदु है। यहां मेरा जेएसफ़िल्ड कोड है: http://jsfiddle.net/knzNg/

केवल अंतर यह है कि मैं स्वत: पूर्ण डेटा के लिए डेटास्रोत के रूप में स्थानीय सरणी का उपयोग करता हूं। मुझे लगता है कि रिमोट डेटासोर्स का उपयोग करने के लिए कोड को बदलना बेहतर है।

Answer 2

मुझे लगता है कि कॉम्बो बॉक्स कोड में एक बग हो सकता है, क्योंकि मैं इसे काम करने के लिए नहीं मिला। 'Select:' को 'चयनित:' में बदलने का प्रयास करें।

या आप वास्तविक JQuery UI कोड में कोड को बदलने का प्रयास कर सकते हैं, मेरा मानना ​​है कि नीचे अपराधी है इसलिए 'चयन' में बदलाव काम कर सकता है। मैं कह सकता हूं क्योंकि मैंने कोशिश नहीं की है, मैं बस उपर्युक्त के साथ चला गया।

select: function(event) { 
    this._trigger("selected", event, { item: this.active }); 
} 

Answer 3

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

select: function (event, ui) { 
    var label = ui.item.label; 
    var value = ui.item.value; 
    $this = $(this); 
    setTimeout(function() { 
     $('#txtBoxRole').val(value); 
    }, 1); 
}, 

Answer 4

(यह पहले से ही से पहले आईई ही से शुरू हो रहा किया गया है) मैं एक ही मुद्दा है और googling के एक बहुत बाद, ऐसा लगता है कि कुछ अन्य jquery प्लगइन UI Core के साथ विरोधाभासी है। तो परिणाम यह था कि मेरा jquery validation plugin version 1.6 त्रुटि उत्पन्न कर रहा था। मैंने jquery validation to 1.9 बदल दिया है और अब autocomplete माउस का उपयोग कर चयन योग्य है।

Answer 5

मेरे लिए 1.9 कार्यों के लिए jQuery सत्यापन प्लगइन संस्करण बदलने

Answer 6

मैं आज इस समस्या थी और पाया कि क्षेत्र है जो स्वत: पूर्ण होना चाहिए, ध्यान देने के घटना है जो document.getElementById ('आईडी')। मान का उपयोग किया था = गलत आईडी के साथ, इस प्रकार स्क्रिप्ट को रोकना।

Answer 7

मुझे एक ही समस्या का सामना करना पड़ रहा था। जब मैं किसी विकल्प पर क्लिक करता था तो मैं फॉर्म जमा करना चाहता था। लेकिन इनपुट के मूल्य को सेट करने से पहले फॉर्म जमा हो गया था। इसलिए सर्वर की तरफ नियंत्रक को शून्य मान मिला।

मैं एक संबंधित पोस्ट पर विलियम निउ के जवाब का एक संशोधित संस्करण का उपयोग कर इसे हल - jQuery UI autocomplete select event not working with mouse click

मैं मूल रूप से घटना प्रकार के लिए जाँच की। यदि यह एक क्लिक था तो मैं स्पष्ट रूप से इनपुट बॉक्स के मान को ui.item.value में मान पर सेट करता हूं। नीचे दिए गए टुकड़ा देखें

jQuery("#autoDropDown").autocomplete({ 
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0, 
    select: function(event, ui) { 
     var origEvent = event; 
     while (origEvent.originalEvent !== undefined){ 
      origEvent = origEvent.originalEvent; 
     } 
     //console.info('Event type = ' + origEvent.type); 
     //console.info('ui.item.value = ' + ui.item.value); 
     if (origEvent.type == 'click'){ 
      document.getElementById('autoDropDown').value = ui.item.value; 
      document.getElementById('myForm').submit(); 
     } else { 
      document.getElementById('myForm').submit();  
     } 

    } 
    }); 

Answer 8

@ atsurti की टिप्पणी नेकनीयत है, लेकिन वहाँ एक बेहतर तरीका है।

बस इसके बजाय एक टाइमआउट का उपयोग करें, जिससे jQuery को फॉर्म सेट करने का समय मिल जाए। कम कोड = बेहतर कोड, हाँ? :)

jQuery("#autoDropDown").autocomplete({ 
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0, 
    select: function(event, ui) { 
    window.setTimeout(function(){ 
     document.getElementById('myForm').submit(); 
    }, 1); 
    } 
}); 

Answer 9

किसी और कुछ 2 और एक आधे साल के बाद इस :-) का सामना करना पड़ रहा है, तो ..

ओपी की समस्या का हल अपने select कॉलबैक अंदर event.stopPropagation() कॉल करने के लिए है। उदाहरण:

$input.autocomplete({ 
    // ... options 
    select: function(event, ui) { 
     // ... handlers 
     e.stopPropagation(); 
    } 
}); 

बस कॉलबैक से झूठी लौटने