如何实现点击带现有值的jQuery Autocomplete输入框触发搜索及空输入默认结果

你现有代码存在两个核心问题：

• Autocomplete的初始化逻辑放在了click事件回调内，每次点击输入框都会重复初始化组件，属于冗余操作，也容易引发未知异常
• 不需要额外手写独立的Ajax请求，直接调用jQuery UI Autocomplete自带的search方法即可复用你已经配置好的数据源、渲染逻辑，自动展示结果

修改后的完整代码 #

<!-- Autocomplete search -->
$(function() {
    // 仅初始化一次Autocomplete组件
    const $searchInput = $("#autocomplete_game_search");
    $searchInput.autocomplete({
        source: function( request, response ) {
            $.ajax({
                url:"{{route('autocomplete-game-search')}}",
                type: 'post',
                dataType: "json",
                data: {
                    search: request.term
                },
                success: function( data ) {
                    response( data );
                }
            });
        },
        minLength: 0, // 支持空字符搜索，满足空输入框展示默认结果需求
        select: function (event, ui) {
            return false;
        }
    }).data('ui-autocomplete')._renderItem = function(ul, item){
        return $("<li class='ui-autocomplete-row'></li>")
            .data("item.autocomplete", item)
            .append(item.label)
            .appendTo(ul);
    };

    // 点击输入框触发搜索
    $searchInput.on('click', function() {
        // 直接调用autocomplete自带的search方法，自动读取当前输入框的值走配置好的source逻辑，自动渲染结果
        $searchInput.autocomplete("search");
    });

    // 可选扩展：监听输入内容清空事件，自动触发空搜索展示默认结果
    $searchInput.on('input', function() {
        if ($(this).val() === '') {
            $searchInput.autocomplete("search");
        }
    });
});

关键逻辑说明 #

1. 把组件初始化抽离到click事件外，全局仅初始化一次，避免重复绑定异常
2. minLength设置为0，允许搜索空字符串，满足空输入框点击展示默认结果的需求
3. 点击输入框时直接调用autocomplete("search")方法，如果不传参数会默认使用输入框当前的内容作为搜索词，自动复用你之前写的Ajax请求和_renderItem渲染逻辑，不需要额外手动处理结果渲染
4. 可选新增的input事件监听，可实现用户手动删除所有输入内容时，自动触发空搜索，不用等待点击事件触发

内容的提问来源于stack exchange，提问作者Dapp Future