So I got this code from http://www.elliotswan.com/2007/06/27/better-than-live-ajax-wordpress-ready-search-version-2/ and it works great for live search. The problem I'm having is that when a new search is made while there are results shown it should bindup the results, change to the new results, and then binddown the list of new results. Right now it's changing the results before it binds up, so you quickly see the new results for a moment then it bindsdown the results. Here's the given js:
Event.observe(window, 'load', initSearch, false);
function initSearch() {
Live.init();
}
var Live = function() {
// HTML Search Form
// <div class="search">
// <form method="get" id="searchform" action="/index.php">
// <input type="text" name="s" id="searchinput" size="25" value="<?php the_search_query(); ?>"/><input type="submit" id="searchsubmit" value="Go"/>
// </form>
// </div>
var form = 'searchform'; // id of your search form
var input = 'searchinput'; // id of your search input field
var results = 'searchresults'; // id of your results div/paragraph/whatever
var x = 'closeresults'; // id of the button/link to close the results
var submit = 'searchsubmit'; // id of the submit button
var sText = 'Search and Click Go'; // Default value for your search input field. This is for the automatic clearing of the field onClick.
var iUrl = '/wp-content/themes/thriveafrica/images/blog/searching.gif'; // url of indicator image
var file = '/index.php'; // url of the backend file doing the actual searching. If using WordPress, there's a 99% chance you should this leave as-is.
return {
init : function() {
Event.observe(form, 'submit', this.search, false);
Event.observe(input, 'click', this.clear, false);
$(form).onsubmit = function() {return false;};
Event.observe(x, 'click', this.close, false);
$(x).onclick = function() {return false;};
},
browser : function() {
// Safari can't handle the fading on the form submit, so we have to check for it in order to send it some different styles
if (navigator.userAgent.toLowerCase() == 'safari') {return true;}
},
clear : function() {
if($F(input) == sText) {$(input).value = ''; }
$(input).onblur = function() { if($F(input) == '') {$(input).value = sText; }}
},
close : function() {
Effect.SwitchOff(results, {queue: {position: 'end', scope: 'close'}});
Effect.Fade(x, {duration: .5, queue: {position: 'front', scope: 'close'}});
},
active : function() {
if(this.Browser == true) {
var indicator = document.createElement('img');
indicator.src = iUrl;
indicator.id = 'indicator-safari';
indicator.style.display = 'none';
$(form).appendChild(indicator);
Effect.Appear('indicator', {duration: .5, queue: {position: 'end', scope: 'active'}});
}
else {
var indicator = document.createElement('img');
indicator.src = iUrl;
indicator.id = 'indicator';
indicator.style.display = 'none';
$(form).appendChild(indicator);
Effect.Fade(submit, {duration: .5, queue: {position:'front', scope: 'active'}});
Effect.Appear('indicator', {duration: .5, queue: {position: 'end', scope: 'active'}});
}
},
complete: function() {
Effect.Fade('indicator', {duration: .5, queue: {position:'end', scope: 'active'}});
Effect.BlindDown(results, {queue: {position: 'end', scope: 'active'}});
if(this.Browser != true) {Effect.Appear(submit, {duration: .5, queue: {position: 'end', scope: 'active'}});}
Effect.SlideDown(x, {duration: .5, queue: {position: 'end', scope: 'active'}});
},
search : function() {
if($(results).style.display != 'none') {
Effect.Fade(x, {duration: .5, queue: {position: 'front', scope: 'active'}});
Effect.BlindUp(results, {queue: {position: 'front', scope: 'active'}});
}
Live.active();
var url = file;
var pars = 's='+$F(input);
var target = results;
var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars, onComplete: Live.complete, evalScripts: true});
}
};
}();
Any ideas on how I can delay it from view the results before it binds up? Thanks!