With all of the AJAX talk going around I thought it was time to add some to my site. This Modx snippet turns the FlexSearchForm snippet into an AJAX site search. The reults from the search are loaded right in the page for the user. If the user does not have javascript, the snippet will use the default searching of the FlexSearchForm snippet.

With all of the AJAX talk going around I thought it was time to add some to my site. This Modx snippet turns the FlexSearchForm snippet into an AJAX site search. The reults from the search are loaded right in the page for the user. If the user does not have javascript, the snippet will use the default searching of the FlexSearchForm snippet.

Let me get these items out of the way before I get into using the snippet.

• This code is based off of the FlexSearchForm snippet created by jaredc.
• The javascript code is based off of the example by Steve Smith of orderedlist.com.
• The loading images I have included are from mentalized.net.
• The search highlighting plugin is modified from Susan Ottwell's (http://www.sottwell.com) original code.
• Thanks goes to eastbind and the Japanese Modx forum for utf-8 encoding additions.
• Thanks to Ryan Thrash (http://www.vertexworks.com) for the assistance in creating some of the new features.

Note: For this code to work you must include a call to the prototype and the script.aculo.us javascript libraries in your template. This is done automatically with the addJscript parameter unless you set it to 0.

If you would like to see this snippet in action use the search box on the right.  You can disable javascript as well to see how the search will still work without it.

Updated: 05/18/2006 - I have added the code from Thomas (Shadock) to the main snippet to allow for live searching (i.e. results as you type). There is a new parameter that goes along with this. If you add the parameter &ajaxSearchType=`1` you will turn on the live search. I have also updated the scriptaculous effects to run in succession so the effects look better.

Updated: 04/29/2006 - The code from Eastbind and the japanese community has been integrated for utf-8 encoding. The code has been modified to work with Marcs tag cloud snippet. The plugin Search_Highlight has been included to carry the search highlighting to the linked page (modified from sottwells code). The inital text is removed when a search is started. The javascript is added to the page automatically through the api (this will not work correctly unless you upgraded your Modx version to 0.9.2.1). This can also be removed through a parameter.

Updated: 04/03/2006 - To make the search even better, I have added the search highlighting code form Marc (MadeMyDay). The updated code can be found in the downloads. You need to update all of the files excluding the images for this to work correctly.

Updated: 03/20/2006 - After receiving some feedback I have modified the snippet a little. There is now a button that appears to close the search box after a search. Also I have made the snippet output the parameters set in the snippet to a bit of javascript so that I can use them in the ajax call. So you do not have to update the file ajaxSearch.php for your search settings. A thank you goes out to sottwell for these great ideas.

For more information on AjaxSearch including parameters, examples, and change log information go here:
AjaxSearch Snippet Development Area