0

I have the code below, when the user enter 3 letters in the autocomplete search field it appears the results, if there are results.

For example if the user introduce 3 letters for a conference name like "con" it appears "conference 1", "Conference ", etc.

If the user introduces the name of a city like "New" it appears "Newcastle".

But, do you know, if there are no results that correspond to the 3 letters introduced by the user how to show a message like 'No results correspond to the search'?

$("#search").catcomplete({
    source: "{{ URL::to('autocomplete-search') }}",
    minLength: 3,
    select: function(conference, ui) {
        if(ui.item.category=="Conferences"){
            window.location.href = ui.item.url;
        }
        else{
            $.get(ui.item.url, function(result) {
                var newConferences = '';
                let imageUrl = ! conference.image ? '/img/test.png' : conference.image;
                var placeholder = "{{route('confeerences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";

                $.each(result, function(index, conference) {
                    var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
                    newConferences += '<div>\n' +
'                        <div>\n' +
'                            <img src='+ imageUrl +' alt="Card image cap">\n' +
'                            <div>\n' +
'                                <h5>'+conference.name+'</h5>\n' +
'                            </div>\n' +
'                    </div></div>';
                });
                // add the HTML to the #conferences div
                $('#conferences').html(newConferences);
            }, 'json');
        }
    }
});

0 Answers0