I have the following autocomplete script that is working by typing at least 1 character into the search input.

<!-- 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);
        };
    }

I want to improve this search by showing a default search result clicking on the empty input and when all the search text is deleted.

Also I need to show the search result of an existing text in the search input by clicking on the search input. Right now if i search a text, click outside of the input and click in the input again, the previous search won't be shown again, I have to type more text or delete text first.

I was able to catch the "click event with existing text" and "click event on empty input" with the following code:

<!-- 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')
                    }
                });
            }
        }
    }

My problem now, I don't know how to trigger the autocomplete where I have written the alerts. I tried many ways already, but I can't find the right syntax calling autocomplete with the "data" from my ajax call.

CodePudding user response：

You can use bind event like this .bind('focus', function(){ $(this).autocomplete("search"); } );

Try the code.

$('#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')
                }
            });
        }
    }
}