如何使用現有值觸發jquery自動完成點擊輸入和空輸入的默認結果

我有以下自動完成腳本，它通過在搜索輸入中輸入至少 1 個字符來作業。

<!-- Autocomplete search -->
    $('#autocomplete_game_search').click(function () {
        $( "#autocomplete_game_search" ).autocomplete({
            source: function( request, response ) {
                // Fetch data
                $.ajax({
                    url:"{{route('autocomplete-game-search')}}",
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            // minLength: 1,
            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);
        };
    }

我想通過在空輸入上單擊并洗掉所有搜索文本時顯示默認搜索結果來改進此搜索。

此外，我需要通過單擊搜索輸入來顯示搜索輸入中現有文本的搜索結果。現在，如果我搜索文本，在輸入外部單擊并再次單擊輸入，則不會再次顯示先前的搜索，我必須先輸入更多文本或洗掉文本。

我能夠使用以下代碼捕獲“帶有現有文本的單擊事件”和“空輸入時的單擊事件”：

<!-- Autocomplete search -->
    $('#autocomplete_game_search').click(function () {
        var clicksearch = 0;
        $( "#autocomplete_game_search" ).autocomplete({
            source: function( request, response ) {
                clicksearch = 1;
                // Fetch data
                $.ajax({
                    url:"{{route('autocomplete-game-search')}}",
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function( data ) {
                        response( data );
                    }
                });
            },
            // minLength: 1,
            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);
        };

        // Ajax search on click or full delete
        if(clicksearch === 0){
            // Check if search text available
            var term = $("#autocomplete_game_search").val();
            // Ajax search on click previous search text
            if(term !== ''){
                $.ajax({
                    url:"{{route('autocomplete-game-search')}}",
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: term
                    },
                    success: function( data ) {
                        alert('click on text');
                    }
                });
            }
            else{
                // Ajax search on empty search text
                $.ajax({
                    url:"{{route('autocomplete-game-search')}}",
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: ''
                    },
                    success: function( data ) {
                        alert('empty text')
                    }
                });
            }
        }
    }

我現在的問題是，我不知道如何在我撰寫警報的地方觸發自動完成功能。我已經嘗試了很多方法，但是我找不到正確的語法來使用我的 ajax 呼叫中的“資料”呼叫自動完成。

uj5u.com熱心網友回復：

您可以使用這樣的bind事件.bind('focus', function(){ $(this).autocomplete("search"); } );

試試代碼。

$('#autocomplete_game_search').click(function () {
    var clicksearch = 0;
    $( "#autocomplete_game_search" ).autocomplete({
        source: function( request, response ) {
            clicksearch = 1;
            // Fetch data
            $.ajax({
                url:"{{route('autocomplete-game-search')}}",
                type: 'post',
                dataType: "json",
                data: {
                    search: request.term
                },
                success: function( data ) {
                    response( data );
                }
            });
        },
        // minLength: 1,
        select: function (event, ui) {
            return false;
        }
    }).bind('focus', function(){ 
        $(this).autocomplete("search"); 
    }).data('ui-autocomplete')._renderItem = function(ul, item){
        return $("<li class='ui-autocomplete-row'></li>")
            .data("item.autocomplete", item)
            .append(item.label)
            .appendTo(ul);
    };

    // Ajax search on click or full delete
    if(clicksearch === 0){
        // Check if search text available
        var term = $("#autocomplete_game_search").val();
        // Ajax search on click previous search text
        if(term !== ''){
            $.ajax({
                url:"{{route('autocomplete-game-search')}}",
                type: 'post',
                dataType: "json",
                data: {
                    search: term
                },
                success: function( data ) {
                    alert('click on text');
                }
            });
        }
        else{
            // Ajax search on empty search text
            $.ajax({
                url:"{{route('autocomplete-game-search')}}",
                type: 'post',
                dataType: "json",
                data: {
                    search: ''
                },
                success: function( data ) {
                    alert('empty text')
                }
            });
        }
    }
}

標籤：javascript 查询 阿贾克斯 jquery-ui jquery-ui-自动完成

上一篇：WooCommerce購物車頁面更新后回圈功能未運行

下一篇：如何在jQuery中獲取所選元素的x，y位置？