Search function with AJAX
Hey guys,
Just over the past week i've been looking into jQuery.
I can handle like the most basic of things, removing a div marked with id, adding an effect and a few plugins etc.
So there is a small script i'm working on.
You type in some search terms. You click submit.
JQuery looks for the submit action and slides out a div with content and then removes it entirely.
It then adds a load icon with an id attached, it then fades out the load icon.
It then goes onto to show a div (the one that was slid out) with its new contents in it, passed in with a function to obtain the new results.
The new results function captures the data using the AJAX method and appends the results to this function.
Could someone take a look at the code please?
Many thanks
<3 JQuery
Alistair
-
$(function()
{
$('#submit').click(function()
{
function hideSearch()
{
$('#focus').hide('slow','',removeSearch())
}
function removeSearch()
{
$('#focus').remove(showLoad())
}
function showLoad()
{
$('#bnrMdl').show('<span id="load">Content is loading . . .</span>', removeSearch());
}
function removeload()
{
$('#load').fadeOut('normal', showSearch());
}
function showSearch()
{
$('#focus').show("slide", { direction: "down" }, 750, results());
}
function results()
{
var searchterm = $("#searchterm").val();
$.ajax
({
url: 'search.php',
type: 'POST',
data: 'searchterm=' + searchterm,
success: function(result)
{
$('#bnrMdl').append('<div id="focus">' + result + '</div>');
}
})
return false;
}
});
});
EDIT* Oh yeah its not working, all thats happening is its jumping to search.php with no AJAX.