EE search submit via AJAX
Development and Programming
Hi Ramseymedia, Did you get the solution for “refreshObject is null” ? When I check it in Firebug, it says “refreshObject is null”[/quote]
Hurrah ! I have accomplished the target. Thanks Guys for your informative code. It works for me. I didn’t use the getKeywordResults(url) function. I took the result from $(‘#memberSearch’).submit(function(e){});
Here is my code:
/*--------------------------------------------
* Ajax site search
---------------------------------------------*/
$('#keywords').keyup(function() {
if($(this).val().length >= 3) {
$('#searchResult').trigger('click');
}
});
$('#memberSearch').submit(function(e) {
if(e.preventDefault) { e.preventDefault();
} else {
e.returnValue = false;
}
var keyword = $(this).find("input[type='text']").val();
var values = $(this).serialize();
var postURL = $(this).attr('action');
$.ajax({
url : postURL,
type : "POST",
data : values,
success : function(data, textStatus, jqXHR) {
var searchResult = $("#search_results_container", data);
if(searchResult.length == 0){
$("#search_results").fadeIn('slow').html("<h3>No result found</h3>");
}else{
$("#search_results").fadeIn('slow').html(searchResult);
}
}
});
});
I thought i’d share my solution, using the mootools more library class form.request.
Make sure you include reference to the mootools libraries. You will need to compile your own “mootools more”.
window.addEvent('domready', function(){
// The elements used.
var myForm = document.id('myForm'),
myKeywords = document.id('myKeywords'),
myResult = document.id('myResult');
// Keyup function
myKeywords.addEvent('keyup', function(){
if(this.value.length >= 3) {
myForm.fireEvent('submit')
}
});
// Ajax
new Form.Request(myForm, myResult, {
resetForm: false
});
});Then my templates: search page
{exp:search:simple_form result_page="search/ajax-results" no_result_page="search/ajax-no-results" search_in="everywhere" channel="blog" results="5" id="myForm"}
<input type="text" name="keywords" size="15" maxlength="100" id="myKeywords"/>
{/exp:search:simple_form}
<div id="myResult"></div>no results template “search/ajax-no-results”
No results found for <strong>{exp:search:keywords}</strong>results template “search/ajax-results”
<ul>
{exp:search:search_results}
<li><a href="/blog/{url_title}">{title}</a></li>
{/exp:search:search_results}
</ul>A few additions to my scripts
window.addEvent('domready', function(){
var myForm = document.id('myForm'),
keywordField = document.id('keywords'),
myResult = document.id('myResult');
var keyupTimer = Function.from();
// Keyup function
keywordField.addEvent('keyup', function(){
clearTimeout(keyupTimer);
if(this.value.length >= 3) {
myForm.spin();
keyupTimer = (function () {myForm.fireEvent('submit')}).delay(1000);
}
});
new Form.Request(myForm, myResult, {
resetForm: false,
requestOptions: {
'spinnerTarget': myForm
}
});
keywordField.addEvent('focus', function(event){
event.stop();
this.morph('.searchExpand');
})
keywordField.addEvent('blur', function(event){
event.stop();
this.morph('.searchInpand');
})
var emptyResultsTimer = Function.from();
myResult.addEvent('mouseleave', function (){
emptyResultsTimer = (function () {
myResult.empty();
}).delay(700);
})
myResult.addEvent('mouseover', function(){clearTimeout(emptyResultsTimer);});
});I added a timer to the submit only fires after 1 second after the last keyup, otherwise it was firing after the third keyup which would often tripup with multiple requests being made for every keyup thereafter.
A very simple morph for the keyword field, and the emptying of the results on blur.
I’ve also triggered the spinner early to show activity