JQuery autocomplete搜索框点击选项后无法正常fadeOut问题求助

Let's break down why your dropdown keeps re-appearing after selecting an option, then fix it step by step.

The Root Cause #

When you click a dropdown option:

1. The focusout event on #search fires first (since you're clicking outside the input), which triggers check_search().
2. At this point, the search input already has a value from the clicked option, so check_search() runs an AJAX request that re-renders and fades in the dropdown.
3. This overrides the fadeOut() you called in the click event, making the dropdown pop back up.

Plus, you're using duplicate id="select_name" on all list items—this is invalid HTML (IDs must be unique) and can cause inconsistent event behavior.

The Fix #

Here's the revised code with clear explanations:

1. Updated jQuery Code

// Flag to track if we're actively selecting an option
let isSelecting = false;

$('#search').keyup(function() {
    // Only run search logic if we're not selecting an option
    if (!isSelecting) {
        check_search();
    }
});

$('#search').focusout(function() {
    // Delay execution to let the click event finish first
    setTimeout(() => {
        if (!isSelecting) {
            check_search();
        }
        // Reset the flag after focusout completes
        isSelecting = false;
    }, 100);
});

function check_search() {
    const search = $('#search').val();
    if (search.length > 0) {
        $('#search').removeClass('border-danger');
        const _token = $('#_token').val();
        $.ajax({
            url:"{{ route('pro.claim.autocomplete') }}",
            method:"POST",
            data:{search, _token},
            dataType:"json",
            success:function(result){
                $('#suggest_name').html(result).fadeIn();
            }
        });
    } else {
        $('#suggest_name').fadeOut().html('');
        $('#search').addClass('border-danger').focus();
    }
}

// Bind click to class instead of duplicate ID
$(document).on('click','.select_name',function () {
    isSelecting = true; // Block focusout's search logic temporarily
    $('#search').val($(this).attr('value'));
    $('#suggest_name').fadeOut();
});

2. Updated Laravel Controller Code

// AUTOCOMPLETE
public function autocomplete(Request $request)
{
    $search = $request->search;
    $names = ProListing::where('name','like','%'.$search.'%')->get();
    $result = '<ul>';
    if ($names->isNotEmpty()) {
        foreach ($names as $name) {
            // Use class instead of duplicate ID to follow HTML standards
            $result .= '<li class="select_name" value="'.$name->name.'">'.$name->name.'</li>';
        }
    } else {
        $result .= '<li class="no-result">No Business Page Available</li>';
    }
    $result .= '</ul>';
    return response()->json($result);
}

Key Changes Explained #

• Unique Identifiers: Swapped id="select_name" for class="select_name" to ensure all options trigger the click event properly (duplicate IDs are invalid in HTML).
• Selection Flag: The isSelecting variable tells the focusout event to skip running the search logic when we're actively choosing an option, preventing the conflicting AJAX request.
• Delayed Focusout: Using setTimeout ensures the click event completes (and sets the flag) before the focusout logic runs, so the dropdown doesn't re-appear.
• Cleaner jQuery: Used chained methods like .fadeIn()/.fadeOut() and jQuery's .val() for more readable code.

This will make the dropdown fade out immediately when you select an option, with no unexpected re-appearance.

内容的提问来源于stack exchange，提问作者MAHBUBUR RAHMAN