ajaxSearch for mootools 1.2

Hi,

today, i’ve decided to start learning MODx, big task for me as so far i’ve always written my php from scratch but i’m sure i’ll end a bit less silly this way
the only thing is that i’ve been working with moo 1.2 eversince its first beta release and will not go back now the 1.21 stable release is out !!! even better, even faster, and so on, so, finding your ajaxSearch very useful , i’ve just modified it to have it work with mootools 1.2/1.21 (no breaking changes between those two

if ever it could be intresting for anyone, here it is

---

//ajaxSearch.js
//Version: 1.7.1 - refactored by coroico
//Created by: KyleJ ([email protected])
//Created on: 03/14/06
//Description: This code is used to setup the ajax search request.
//My thanks to Steve Smith of orderlist.com for sharing his code on how he did this
//Live Search by Thomas (Shadock)

//Updated: 06/03/08 - added advSearch and Hidden from menu options - 1.7.1
//Updated: 03/03/08 - Fix : % character freeze the search - 1.7.1
//Updated: 01/02/08 - Added version, folder and some others parameters - 1.7.0
//Updated: 12/14/07 - Fix : bad URI with several document groups - 1.6.2d -
//Updated: 11/17/07 - Added IDs document selection - 1.6.2
//Updated: 11/06/07 - character encoding and opacity troubles corrected - 1.6.1

//Updated: 01/22/07 - Switched to mootools support
//Updated: 09/18/06 - Added user permissions to searching

//set the loading image to the correct location for you
//set the close image to the correct location for you
//set the ajax call to the correct location of ajaxSearch.php

// AjaxSearch Snippet folder location
var _base = ’assets/snippets/ajaxSearch/’;

// AjaxSearch Snippet folder
var _version = ’1.7.1’;

//From Thomas : vars for live search
var _oldInputFieldValue = "";
var _currentInputFieldValue = "";
var _timeoutAdjustment = 0;
var newToggle;
var is_searching = false;
var liveTimeout = null;

function activateSearch() {
var searchForm = $(’ajaxSearch_form’);

if (as_version != _version) {
alert("AjaxSearch version obsolete. Check the version of AjaxSearch.js file");
return;
}

if (searchForm) {
$(’ajaxSearch_form’).addEvent(’submit’, function(e) { e.stop(); doSearch(); });

var i = new Element(’img’);
i.setProperties({
src: _base + ’images/indicator.white.gif’, //Loading Image
alt: ’loading’,
id: ’indicator’
});
toggleImage(i);

searchForm.appendChild(i);

var c = new Element(’img’); //Close Image
c.setProperties({
src: _base + ’images/cross.png’,
alt: ’close search’,
id: ’searchClose’
});
c.addEvent(’click’, function(){closeSearch();});

if (liveSearch) {
c.setStyles({
position: ’absolute’,
top: ’1px’,
right: ’1px’
});
} else {
toggleImage(c);
}

var s = $(’ajaxSearch_output’);

var n = new Element(’div’); // New search results div
n.setProperty(’id’, ’current-search-results’);
n.setStyle(’opacity’, ’1’);
s.appendChild(n);
newToggle = new Fx.Slide(’current-search-results’, {duration: 600}).hide();
newToggle.isDisplayed = function() {
return this.wrapper[’offset’+this.layout.capitalize()] > 0;
}

if (liveSearch) {
s.appendChild(c);
} else {
searchForm.appendChild(c);
}

is_searching = false;
search_open = false;
if (liveSearch) {
$(’ajaxSearch_input’).addEvent(’keyup’, liveSearchReq);
$(’ajaxSearch_submit’).setStyle(’opacity’, ’0’);
}
}
}

function liveSearchReq() {
if (liveTimeout) {
window.clearTimeout(liveTimeout);
}
liveTimeout = window.setTimeout("doSearch()",400);
}

function doSearch() {
// If we’re already loading, don’t do anything
if (is_searching) return false;
s = $(’ajaxSearch_input’).value;
// Same if the search is blank
if (s == ’’) return false;
is_searching = true;
c = $(’current-search-results’);

toggleImage($(’indicator’));
if (!liveSearch) {if (!search_open) {toggleImage($(’searchClose’));}}
search_open = true;
b = $(’ajaxSearch_submit’);
b.disabled = true;

if (newToggle.isDisplayed()) {
newToggle.toggle();
}

// Setup the parameters and make the ajax call
var pars = Hash.toQueryString({
q: _base + ’ajaxSearch.php’,
search: s,
as_version: as_version,
debug: debug,
ajaxMax: ajaxMax,
stripHtml: stripHtml,
stripSnip: stripSnip,
stripSnippets: stripSnippets,
searchStyle: encodeURI(searchStyle),
advSearch: encodeURI(advSearch),
minChars: minChars,
showMoreResults: showMoreResults,
moreResultsPage: moreResultsPage,
as_language: as_language,
extract: extract,
extractLength: extractLength,
docgrp: encodeURI(docgrp),
idgrp: encodeURI(idgrp),
idType: idType,
depth: depth,
highlightResult: highlightResult,
hideMenu: hideMenu
});

var ajaxSearchReq = new Request({url: ’index-ajax.php’, method: ’post’, data: pars, onComplete: doSearchResponse});
if (newToggle.isDisplayed()) {
newToggle.toggle();
ajaxSearchReq.send.delay(600, ajaxSearchReq);
} else {
ajaxSearchReq.send();
}
return true;
}

function doSearchResponse(request) {
var o = $(’ajaxSearch_output’);
o.setStyle(’opacity’, opacity); // set of opacity parameter
$(’current-search-results’).set(’html’, request);
newToggle.toggle();
is_searching = false;
setTimeout(’resetForm()’,600);
}

function resetForm() {
s = $(’ajaxSearch_submit’);
s.disabled = false;
toggleImage($(’indicator’));
}

function closeSearch() {
newToggle.toggle();
setTimeout(’clearSearch()’,600);
}

function clearSearch() {
toggleImage($(’searchClose’));
search_open = false;
$(’current-search-results’).innerHTML = ’’;
var o = $(’ajaxSearch_output’);
o.setStyle(’opacity’, ’0’);
$(’ajaxSearch_input’).value="";
$(’ajaxSearch_input’).focus();
}

function toggleImage(imgElement) {
imgStyle = imgElement.getStyle(’opacity’);
if (imgStyle == ’0’) {
imgElement.setStyle(’opacity’, ’1’);
} else {
imgElement.setStyle(’opacity’, ’0’);
}
}

window.addEvent(’domready’, function(){
activateSearch();
})

---

of course, this means that you should load mootools 1.2 in the head so you should change line 218 in snippet.ajaxSearch.inc.php to
$addJscript = isset($addJscript ) ? $addJscript : 0;
and ignore the addscript var in the snippet call. All this to allow you to load a different mootols in your website and in the admin (now, maybe if one day i feel easy with modx i’ll take the time to rewrite the whole admin js in moo 1.2 but, for the moment, let me learn how your cmf works )

have swing

The current version of AjaxSearch is 1.8.1. Did you look at that one?

Hi,

no, sorry, as i said, it was today my first unzipping of MODx and i just installed it as it is, trying to see how to include my own moo js sheet i’m used to and, of course ajaxSerach didn’t work with it. then, first step, have it work... now the second step will be to understand how to build my own menu...

but, tnaks, i’ll of course have a look at the new release of ajaxSearch (even if, for the moment i think it runs with moo 1.11 too as it’s the case of all modx js)

have swing

Quote from: rthrash at Oct 25, 2008, 10:45 AM

The current version of AjaxSearch is 1.8.1. Did you look at that one?

Hi, is there any progress for AjaxSearch/mootools 1.2 working together?

I have successfully gotten this to work with 1.8.1 and mootools 1.2

What I did was I took the copy above compared it to an original 1.7.1 to see the differences then compared it to 1.8.1 to see what was different and changed what was needed for mootools 1.2 until it worked

attached is the working ajaxSearch.js file for mootools 1.2

Thks to virtualgajo & Crash1hd for this adpatation to mootools 1.2.

For those that want use mootools 1.2, keep in mind that this means that you should load mootools 1.2 in the head so you should change llines 328:

// &jsMootools - Location of the mootools javascript library
$cfg[’jsMooTools’] = ’manager/media/script/mootools/mootools.js’;

Hi coroico, do you think this would make a good update for a point release, along with the jQuery version?

Yes. But for the moment the JQuery version don’t run as awaited.
Nevertheless, you are right, version 1.8.2 could be delivered, for instance, with JQuery and/or mootools 1.11 or 1.2.1

If the Mootools 1.1/1.2 version is ready now but not the jQuery, then we could just do a 1.8.2 release for that, and 1.8.3 when jQuery fully works.