Question

I’ve got some JQuery which monitors a form. Basically, for every keyup it will call a php file to search the database.

$(document).ready(function() {
    $("#faq_search_input").watermark("Begin Typing to Search");

    $("#faq_search_input").keyup(function() {
        var faq_search_input = $(this).val();
        var dataString = 'keyword='+ faq_search_input;

        if (faq_search_input.length > 2) {
            $.ajax({
                type: "GET",
                url: "core/functions/searchdata.php",
                data: dataString,
                beforeSend: function() {
                    $('input#faq_search_input').addClass('loading');
                },
                success: function(server_response) {
                    $('#searchresultdata').empty();
                    $('#searchresultdata').append(server_response);
                    $('span#faq_category_title').html(faq_search_input);
                }
            });
        }

        return false;
    });
});

This works fine, however it filters the results in #searchresultdata depending on the query. The only thing is, if nothing is in the form, I want it to load everything – the user should not have to click the form to do this, therefore a .blur would not work.

The PHP file is simply:

if(isset($_GET['keyword'])){}

Answer 1

you should handle a [*] search on your server

$query = "SELECT Image, Manufacturer, Model FROM Device_tbl WHERE Manufacturer LIKE '%$keyword%' OR Model LIKE '%$keyword%";
if ($keyword=='*') $query = "SELECT Image, Manufacturer, Model FROM Device_tbl";

$(document).ready(function() {
    $("#faq_search_input").watermark("Begin Typing to Search");

    $("#faq_search_input").keyup(function() {
        var faq_search_input = $(this).val();
        if (faq_search_input =='') faq_search_input ='*';
        var dataString = 'keyword='+ faq_search_input;

        if (faq_search_input.length > 2 || faq_search_input=='*') {
            $.ajax({
                type: "GET",
                url: "core/functions/searchdata.php",
                data: dataString,
                beforeSend: function() {
                    $('input#faq_search_input').addClass('loading');
                },
                success: function(server_response) {
                    $('#searchresultdata').empty();
                    $('#searchresultdata').append(server_response);
                    $('span#faq_category_title').html(faq_search_input);
                }
            });
        }

        return false;
    });
    $("#faq_search_input").trigger('keyup');
});