如何触发 jquery 自动完成单击具有现有值的输入和空输入的默认结果

Question

我有以下自动完成脚本，它通过在搜索输入中输入至少 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 调用中的“数据”。

Answer 1

您可以像这样使用 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')
                }
            });
        }
    }
}

如何触发 jquery 自动完成单击具有现有值的输入和空输入的默认结果

How to trigger jquery autocomplete clicking on input with existing value and default result for empty input

javascript

jquery

ajax

jquery-ui

jquery-ui-autocomplete