jQuery .focusout/.click xung đột

Question

Tôi đang làm việc trên một dự án có hộp tìm kiếm tự động hoàn tất. Bây giờ tôi có vấn đề mà tôi muốn chuyển giá trị từ các autocompleteresults được tìm thấy vào hộp nhập liệu, nhưng đồng thời, tôi muốn autocompletebox ẩn khi inputfield không tập trung nhiều hơn.

Bây giờ tôi có xung đột xảy ra với cả hai người kể từ khi nhấp vào autocompletebox được coi là tập trung và ẩn hộp ngay cả trước khi nó có thể chuyển giá trị. Bất kỳ con trỏ hoặc cách giải quyết nào cho loại vấn đề này? Đây là một jsfiddle để làm cho nó rõ ràng hơn cho bạn.

http://jsfiddle.net/KeGvM/

Hoặc đây

CSS:

#a_c {display:none;}​ 

JS:

$('#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; 
});​ 

HTML:

<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

Giải pháp của tôi trong tình huống tương tự đã sử dụng thời gian chờ để tạm hoãn hành động thực hiện trong blur xử lý sự kiện. Như thế này:

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

Answer 2

Làm thế nào về việc sử dụng

: hover

tôi giải quyết cùng một vấn đề sử dụng nó.

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

Answer 3

Con đường tôi giải quyết này đã sử dụng sự kiện mousedown thay vì click, như trường hợp mousedown được kích hoạt trước khi sự kiện focusout khi click thì không.

Bạn có thể dùng thử trong bản trình diễn nhỏ bên dưới. Tập trung vào trường và sau đó nhấp vào nút.

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>

Như bạn có thể nhìn thấy đầu ra là theo trình tự sau:

1. chuột xuống
2. Focus ra
3. Bấm

Điểm bất lợi duy nhất của giải pháp này là nó không chờ người dùng nhả nút chuột của họ, nhưng bạn có thể tự quyết định xem đó có phải là một vấn đề hay không.