Question

I made a jQuery autocomplete search to search through pages in my CI application, the returned JSON data includes 2 elements, “slug” of the page and “name” of the page, so im using the “name” to show on autocomplete list, and when someone selects a result or press enter key it redirects him to that page using the slug:

$(function() {
    $( "#search" ).autocomplete({
        source: "index.php/pages/get_pages",
        minLength: 2,
        select: function(event, ui) {
            $(event.target).val(ui.item.value);
            window.location.href = "index.php/pages/" + ui.item.slug;
            return false;
        }
    });

    $("#search").keypress(function(e){
        if (e.which == 13) {
            window.location.href = "index.php/pages/no-results";
            return false;
        }
    });
});

now i added another option when someone types a keyword and no results were found then he press enter it should go to the “pages” with no-results parameter.

This code worked fine on all browsers except for Firefox, it goes to no-results page in all cases.

I need it to go to no-results page only if no results were found and the user entered a random page name then pressed enter.

Answer 1

I think it’s about forwarding issues. When you press “Enter” button, keypress’ and autocomplete select’s functions are called both. We should insert an if logic in order to execute only one of them.

By the way I think it’s quite logical to do forwarding operations in server side.

$(function() {
    var isSelected = false;
    $("#search" ).autocomplete({
        source: "index.php/pages/get_pages",
        minLength: 2,
        select: function(event, ui) {
            isSelected = true;
            $(event.target).val(ui.item.value);
            window.location.href = "index.php/pages/" + ui.item.slug;
            return false;
        }
    });

    $("#search").keypress(function(e){
        if (e.which == 13) {
            if(!isSelected)
            {
                 window.location.href = "index.php/pages/no-results";
            }
            return false;
        }
    });
});