Home » Notebook » Ajax Search Snippet

Site Menu

Search

15 Comment(s) ⇒

Downloads

extension imageajaxSearch.zip
Size: 19.94 kB | 01/29/2007
Downloads: 400
extension imageajaxSearch_readme.txt
Size: 5.13 kB | 01/29/2007
Downloads: 494
extension imageclose.png
Size: 634 B | 01/29/2007
Downloads: 292
extension imageSearch_Highlight_plugin.php
Size: 2.95 kB | 01/29/2007
Downloads: 485
extension imagesnippet-ajaxSearch-tpl.php
Size: 23.24 kB | 01/29/2007
Downloads: 506
extension imageAjaxSearch.php
Size: 4.49 kB | 01/29/2007
Downloads: 529
extension imageindex-ajax.php
Size: 1.47 kB | 01/29/2007
Downloads: 507
extension imageAjaxSearch.inc.php
Size: 7.21 kB | 01/29/2007
Downloads: 515
extension imageAjaxSearch.js
Size: 5.73 kB | 01/29/2007
Downloads: 393
extension imageindicator.white.gif
Size: 1.51 kB | 01/29/2007
Downloads: 253
extension imageindicator.black.gif
Size: 1.52 kB | 01/29/2007
Downloads: 245


Ajax Search 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.

Comments

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
Required fields are marked with *.
Showing comments 1 to 10 of 15 | Next | Last
Comment

15

loygvvon loygvvon Mon December 29, 2008, 23:49:47

[URL=http://nnupbsmi.com]cngszxfn[/URL] yvtiazmi http://qheidgef.com yggfraze pxndebns <a href="http://abfqrltn.com">pyojjgqd</a>

Comment

14

AjaxSearch.js includes twice on page reload Anton Fri June 08, 2007, 02:35:41

Hi everyone, I am trying to figure out why when I reload a page, the AjaxSearch.js and mootools.js are included again. Because of this, the search only works once. Has anybody had this problem?

Cheers!

Comment

13

all results page nos Sun February 18, 2007, 03:09:48

Hello,
the snippet is great and works fine for my site. But one thing runs wrong. The "view all results page" does not show special chars like ä, ü ... intead it shows ? (and no highlight, thougH the css is there). The entire site is set to work with utf-8 charset and the Ajax result div shows correctly.
Do you have an idea?

Comment

12

ajax search error ingo fabbri Mon February 05, 2007, 13:28:53

hi!

has anyone already solved this problem? i get this error in IE:
EXCEPTION AJAX: 'message' is null or not an object undefined

in FF it says something like:
EXCEPTIONAL AJAX: e has no properties

anyone a clue?

Comment

11

Error message when searching accweb Fri December 15, 2006, 07:47:43

Have just added search to a site but keep getting the following error message whenever a search is attempted:
EXCEPTION AJAX: 'message' is null or not an object undefined

Any ideas gratefully received...

Comment

10

Moving Search Results kjaebker Thu October 26, 2006, 18:50:28

Currently with AjaxSearch the results are displayed in a div below the form. If you disable the ajax functionality you can have the results display where ever you like by calling the snippet twice on the same page and using the display results/display form parameters.

@luckrn - you may check the french forums on modxcms.com to see if anyone has previously translated this and got it working.

Comment

9

display the results waruna Thu October 26, 2006, 01:53:10

hey, can't we display the search results on any location of the page. Now the search results displaying in the same location. I would like to know can i display the search textfied and search button in a one place.E.g<div id="search"></div>. Then the search results in <div id="results"></div>. I want to display the search results on the same page. Thanks !!

Comment

8

Hey, Now it's working Waruna Wed October 25, 2006, 22:32:11

Sorry, it's my mistake in the first time. Now it's working !! thanks for developing this Snippet

Comment

7

Pb traduction luckrn Sun October 22, 2006, 05:58:44

Wonderfull ! It's a great snippets ... but when i traduce in French ($resultsIntroFailure = 'There were no search results. Please try using more general terms to get more results.'; replace by $resultsIntroFailure = 'Désolé, pas de résultats'; and so one), sometimes, i 've got a fatal error ! To progress, the only solution i find is to ... paste the initial code. :\
Any ideas to help me ? Thanks

Comment

6

Restricting the search kjaebker Fri October 20, 2006, 08:53:53

There is not currently a way for your search to be restricted via template. I am planning on creating a new search snippet hopefully in the near future that will be a lot more configurable and search all of the sites content including TVars. I am just waiting on some enhancements to the core of MODx before I start to work on it.

Showing comments 1 to 10 of 15 | Next | Last