Search suggestion box with jQuery and AJAX var searchUser = function(searchQuery){
    var request = $.ajax({
        url:"search.php",
        type: "POST",
        data: { search:searchQuery},
        success: function(reply){
            $("#search-box").css("display", "block");
            $("#search-box").html(reply);
        }
    });
}


I know this is a terrible way of doing it, right? How else would I best go about outputting the search result to my #search-box? Right now, I send an AJAX request to my search.php file which returns all the HTML of the search. Surely this wouldn't be good from a performance perspective?
You should ensure your spacing is consistent.
Since you're using a function expression rather than a declaration, you should terminate the line with a semicolon.
You aren't making any use of the request variable, so why even declare it?
You aren't taking advantage of method chaining. This is causing you to construct two jQuery objects for #search-box when you only need one.
You're right in that this is not the best way to handle it; consider returning JSON or XML.
You have a success callback but not an error callback. In this particular case I don't imagine it would be too bad (your search box will just remain hidden, presumably), but you may want to add one anyway.


Here's how I think your code could look.

var searchUser = function(searchQuery) {
    $.ajax({
        url: "search.php",
        type: "POST",
        data: { search: searchQuery },
        dataType: "json",
        success: function(response) {
            var resultList = response.reduce(function(accumulator, value) {
                return accumulator + "&lt;li&gt;" + value + "&lt;/li&gt;";
            }, "&lt;ul&gt;");
/* alternative for older browsers:
            var resultList = "&lt;ul&gt;";
            $.each(response, function(index, element) {
                resultList += "&lt;li&gt;" + element + "&lt;/li&gt;";
            });
*/
            resultList += "&lt;/ul&gt;";
            $("#search-box").html(resultList).show();
        },
        error: function() {
            $("#search-box").html("An error occurred. Search suggestions could not be loaded.");
        }
    });
};


search.php would then have to do something like:

$results = array("suggest", "suggestion", "suggested", "suggesting");
die(json_encode($results));