jQuery। फ़ोकसआउट/.click संघर्ष

Question

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

अब मेरे पास दोनों के साथ एक संघर्ष चल रहा है क्योंकि स्वत: पूर्ण बॉक्स पर क्लिक को फोकसआउट के रूप में देखा जाता है और यह मान को पार करने से पहले भी बॉक्स को छुपाता है। इस तरह के मुद्दे के लिए कोई संकेतक या कामकाज? यहां आपको यह स्पष्ट करने के लिए एक jsfiddle।

http://jsfiddle.net/KeGvM/

या यहाँ

सीएसएस:

#a_c {display:none;}​ 

जे एस:

$('#search_field').focusout(function() { 
    $('#a_c').hide(); // IF I DELETE THIS IT WORKS 
}); 

$('#search_field').focusin(function() { 
    $('#a_c').show(); 
}); 

$('#a_c a').click(function() { 
    $('#search_field').val(''); 
    var value = $(this).text(); 
    var input = $('#search_field'); 
    input.val(input.val() + value); 
    $('#a_c').hide(); 
    return false; 
});​ 

एचटीएमएल:

<input autocomplete="off" onkeyup="searchFor(this.value);" name="search" id="search_field" class="bold" type="text" placeholder="Search..."> 
<div id="a_c"><a href="">hello world</a></div>​ 

Answer 1

इसी तरह की स्थिति में मेरे समाधान टाइमआउट उपयोग कर रहा था अस्थायी रूप से कार्रवाई blur ईवेंट हैंडलर में लिया रोकना। इस तरह:

$('#search_field').focusout(function() { 
    window.setTimeout(function() { $('#a_c').hide() }, 100); 
}); 

Answer 2

उपयोग के बारे में कैसे:

मैं इसे का उपयोग कर एक ही समस्या हल हो जाएँ।

$('className').on('focusout', function(e) { 
    if($('.suggestLi' + ':hover').length) { 
     return; 
    } 
    $('.suggestList').empty(); 
}); 

Answer 3

तरह से मैं इस click के बजाय mousedown घटना उपयोग कर रहा था, जबकि click नहीं है के रूप में mousedown घटना focusout घटना से पहले शुरू हो रहा है हल किया।

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

const field = document.getElementById('field'); 
 
const btn = document.getElementById('btn'); 
 

 
btn.addEventListener('click',() => console.log('Click')); 
 
btn.addEventListener('mousedown',() => console.log('Mouse down')); 
 
field.addEventListener('focusout',() => console.log('Focus out'));

<input id="field"> 
 
<button id="btn">Try it</button>

आप देख सकते हैं उत्पादन निम्न क्रम में है:

1. माउस नीचे
2. फोकस बाहर
3. क्लिक करें

इस समाधान का एकमात्र नुकसान यह है कि यह उपयोगकर्ता के माउस बटन को जारी करने की प्रतीक्षा नहीं करता है, लेकिन यदि आप कोई समस्या है तो आप स्वयं के लिए निर्णय ले सकते हैं।