There was a request for a ajax live search. So I went and created a simple module.
Added in 1.1.0
* added key support for browsing results with arrow down and up.
* added escape key to close results.
* added close results on click outside
From the readme:
This module progressively enhances the search form to an ajax live search. It will perform a search like you would use the form normally, and returns the output of the search page. So the search will still work without js enabled.
There's some basic styling attached to this module in the "styling-example". You can use it to get started. See readme in there.
Setup the search.php
So it works almost out of the box with the basic install profile of ProcessWire, you only need make a minor change to the search.php template file to only return the content part (results) on a ajax request.
To get the ajax search only return the content, open search.php and change the output on the bottom to this:
... if(!$config->ajax) include("./head.inc"); echo $out; if(!$config->ajax) include("./foot.inc");
It comes with some module options to define various settings regarding the search form. Following a list with the defaults.
Minium length = 3
min length for starting ajax request
Close button text = 'close'
close button text
ID of searchform = #search_form
if you have a different search form id,class
ID of input = #search_query
if you have a different search input id,class
Query name = 'q'
this is the default param name
as_query_url = ''
if left blank the script will take the action of the form
Any help testing this module is appreciated. If you have any questions or problems setting this up feel free to ask here.
Also feel free to use this as a starting point for your own, or take out the script to implement it differently. It's quite simple and can be adapted really quickly.