如何觸發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 阿贾克斯 jQuery-ui jquery-ui-自动完成

上一篇：jQueryUI可排序重繪錯誤-如何重繪動態添加的可排序元素？

下一篇：如何在Javascript或jQuery中創建具有2個相互影響的拇指的滑塊？