Module AjaxSearch

[Soma]

Ajax Search 1.1.0

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

http://modules.proce...es/ajax-search/

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"); 

Module Settings

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.

[apeisa]

Looks excellent Soma! I don't think even that little change is required, since there is Ajax API in ProcessPageSearch: http://processwire.com/talk/topic/301-field-type-from-db-and-by-ajax/page__p__3373#entry3373

[Soma]

Looks excellent Soma! I don't think even that little change is required, since there is Ajax API in ProcessPageSearch: http://processwire.c..._3373#entry3373

Thanks for that link, I didn't know. But not sure what you mean with using it here. This is module is for frontend progressive enhanced search.

[apeisa]

Forget about me. I took a quick look at the screenshot and thought it was for admin use

[ryan]

Great module Soma! I've been meaning to add something like this in the admin search too, and look forward to taking a closer look at what you've put together here.

[einsteinsboi]

Very nice. Great work, thanks for sharing this

[Mats]

Hi Soma!

Would you consider adding shortcuts for closing the search results list and stepping up/down in the search result list, like in the Admin Hot Keys module?

I tried adding the functionality my self, but my "coding skills" wasn't sufficient.

Thanks for a great module!

/Mats

[Soma]

Hi Soma!

Would you consider adding shortcuts for closing the search results list and stepping up/down in the search result list, like in the Admin Hot Keys module?

I tried adding the functionality my self, but my "coding skills" wasn't sufficient.

Thanks for a great module!

/Mats

I remember someone asking fo such a feature, but the thing is it isn't an autocomplete, suggest feature but a ajax search showing results that's just a html list or whatever the developer put's inside the results. The input text autocomplete default feature in browsers have to be disabled to the ajax search to no get in conflict.

You can browse the results using tab, that's the standard behavior. Also the arrow keys are used to scroll in some browsers or even all I think, it is not a real problem but have to keep in mind. Maybe I could come up with something that's cycles links in a html div, but I'm not to keen to do it.

For the close, there'a a close link, and maybe I could try adding esc key support for closing.

I think I'll have a look at how it could be implemented.

[Mats]

Thanks for looking into it. Much appreciated!

[Soma]

Updated the Module to support arrow key navigation in results, and close on escape key and click outside.

It's there if you wanna check it out and test.

Thanks.

[Mats]

Thanks for the update. Unfortunately i get the following error: (I'm on dev 2.3)

Error Exception: Method AjaxSearch::addScripts does not exist or is not callable in this context (in /Applications/MAMP/htdocs/kalmarlansmuseum/wire/core/Wire.php line 232)

#0 /Applications/MAMP/htdocs/kalmarlansmuseum/wire/core/Wire.php(293): Wire->__call('addScripts', Array)

#1 /Applications/MAMP/htdocs/kalmarlansmuseum/wire/core/Wire.php(293): AjaxSearch->addScripts(Object(HookEvent))

#2 /Applications/MAMP/htdocs/kalmarlansmuseum/wire/core/Wire.php(229): Wire->runHooks('render', Array)

#3 /Applications/MAMP/htdocs/kalmarlansmuseum/wire/modules/Process/ProcessPageView.module(98): Wire->__call('render', Array)

#4 /Applications/MAMP/htdocs/kalmarlansmuseum/wire/modules/Process/ProcessPageView.module(98): Page->render()

#5 [internal function]: ProcessPageView->___execute()

#6 /Applications/MAMP/htdocs/kalmarlansmuseum/wire/core/Wire.php(271): call_user_func_array(Array, Array)

#7 /Applications/MAMP/htdocs/kalmarlansmuseum/wire/core/Wire.php(229): Wire->runHooks('execute', Array)

#8 /Applications/MAMP/htdocs/kalmarl

This error message was shown because you are logged in as a Superuser. Error has been logged.

[Soma]

Sorry, thanks for reporting, for some reason my module repo code was altered at some point, and not consistent anymore with my dev code

Should be fixed now.

[Mats]

Works like a charm! Thanks again!

[Username]

If you are using the latest versions of jQuery close-link is not working.

The solution:
Replace the file AjaxSearch.js line # 95

From:

.live('click',function(){

On:

.on('click',function(){ 

Excuse me for my English, I use Google Translate

[Ovidiu Roman]

Hello,

Ajax Search looks lovely! Would it work on Blog Profile 1.0.1?

From I've seen, the search.php and Form id are different from Processwire 2.4.0, so I'd have to edit both the search.php and the settings of the module ("Class or id of the search form", "Class or id of the search input field"), right?

So, if anyone already did it, please tell me what edits did you make, I failed to make it work...

Thank you!

[Soma]

I haven't tried this module on blog profile, but you can edit the form id in the module settings.

[chriswthomson]

Hi there,

I've just installed this module and noticed an error in the AjaxSearch.js file. Line 94 - 98:

$('.ajaxSearch_close')
.live('click',function(){
$(this).closest('#ajaxSearch').fadeOut();
});

I've changed this to:

$('.ajaxSearch_close').click(function(){
$(this).closest('#ajaxSearch').fadeOut();
});
}

Which appears to work just fine. Is the ".live" left over from a previous version?

[MadHatter]

Hi Chris,

 It looks like .live() was deprecated in jQuery 1.7 (Source). The jQuery site says to use .on() as a replacement for .live(). The .click( handler) function in jQuery is a shortcut for .on( "click", handler ), which works just as well and is my preferred method.

[Soma]

Thanks for the reminder. But there was an issue report some time ago. I just commited an update for the deprecated .live

[davo]

I've been trying to get this module to work with my bastardised search template. I'm not sure if i've written it correctly as when it performs the ajax search, it creates a second search form.

Any help would be much appreciated.:

<?php

 


/**
 * Search template
 *
 */

$out = '';

if($q = $sanitizer->selectorValue($input->get->q)) {

	// Send our sanitized query 'q' variable to the whitelist where it will be
	// picked up and echoed in the search box by the head.inc file.
	$input->whitelist('q', $q); 

	// Search the title, body and sidebar fields for our query text.
	// Limit the results to 50 pages. 
	// Exclude results that use the 'admin' template. 
	$matches = $pages->find("title|body|sidebar~=$q, template=dmc, limit=50"); 

	$count = count($matches); 

	if($count) {
		$out .= "<h2>Found $count pages matching your query:</h2>" . 
			"<ul class='nav'>";

		foreach($matches as $m) {
			$out .= "<li><p><a href='{$m->url}'>{$m->title}</a><br />{$m->DMCcontact_Country}</p></li>";
		}

		$out .= "</ul>";

	} else {
		$out .= "<h2>Sorry, no results were found.</h2>";
	}
} else {
	$out .= "<h2>Please enter a search term in the search box (upper right corner)</h2>
                  ";
}

// Note that we stored our output in $out before printing it because we wanted to execute
// the search before including the header template. This is because the header template 
// displays the current search query in the search box (via the $input->whitelist) and 
// we wanted to make sure we had that setup before including the header template. 

if(!$config->ajax) include("./dmcheader.inc");

echo $out; 

?>
<form id='my_search_form' action='<?php echo $config->urls->root?>dmc-search/' method='get'>
				<input type='text' name='q' id='my_search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />
				<button type='submit' id='search_submit'>Search</button>
			</form>
<?php

if(!$config->ajax) include("./dmcfooter.inc"); 
                        		

http://dmc.dudmc.com/dmc-search/

[davo]

Almost got there;

So I get what's happenning. The page posts back to itself and also displays itself in the pop up, minus the header and footer if there is an ajax call. I'm just trying to work out how to also exclude the search and other text if ajax is there. Maybe it's just too late at night...

<?php

 


/**
 * Search template
 *
 */

$out = '';

if($q = $sanitizer->selectorValue($input->get->q)) {

	// Send our sanitized query 'q' variable to the whitelist where it will be
	// picked up and echoed in the search box by the head.inc file.
	$input->whitelist('q', $q); 

	// Search the title, body and country fields for our query text.
	// Limit the results to 50 pages. 
	// Exclude results that use the 'admin' template. 
	$matches = $pages->find("title|body|DMCcontact_Country~=$q, template=dmc, limit=50"); 

	$count = count($matches); 

	if($count) {
		$out .= "<h2>Found $count pages matching your query:</h2>" . 
			"<ul class='nav'>";

		foreach($matches as $m) {
			$out .= "<li><p><a href='{$m->url}'>{$m->title}</a><br />{$m->DMCcontact_Country}</p></li>";
		}

		$out .= "</ul>";

	} else {
		$out .= "<h2>Sorry, no results were found.</h2>";
	}
} else {
	$out .= "
                  ";
}

// Note that we stored our output in $out before printing it because we wanted to execute
// the search before including the header template. This is because the header template 
// displays the current search query in the search box (via the $input->whitelist) and 
// we wanted to make sure we had that setup before including the header template. 

if(!$config->ajax) include("./dmcheader.inc");

?>

 <div class="container">

	<div class"row">

		


		<div class="col-md-6">
		<h2>Please enter a country name</h2>

	
<form id='my_search_form' action='<?php echo $config->urls->root?>dmc-search/' method='get'>
				<input type='text' name='q' id='my_search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />
				<button type='submit' id='search_submit'>Search</button>
			</form>
		</div>
	</div>	
</div>
<?php

echo $out; 

if(!$config->ajax) include("./dmcfooter.inc"); 

                        		

[davo]

Cracked it i think....

i'm sure someone will know a much smarter way though

<?php

 


/**
 * Search template
 *
 */

$out = '';

if($q = $sanitizer->selectorValue($input->get->q)) {

	// Send our sanitized query 'q' variable to the whitelist where it will be
	// picked up and echoed in the search box by the head.inc file.
	$input->whitelist('q', $q); 

	// Search the title, body and country fields for our query text.
	// Limit the results to 50 pages. 
	// Exclude results that use the 'admin' template. 
	$matches = $pages->find("title|body|DMCcontact_Country~=$q, template=dmc, limit=50"); 

	$count = count($matches); 

	if($count) {
		
                        if(!$config->ajax){$out .= "<h2>Found $count pages matching your query:</h2>";} $out.= 
			"<ul class='nav'>";

		foreach($matches as $m) {
			$out .= "<li><p><a href='{$m->url}'>{$m->title}</a><br />{$m->DMCcontact_Country}</p></li>";
		}

		$out .= "</ul>";

	} else {
		$out .= "<h2>Sorry, no results were found.</h2>";
	}
} else {
	$out .= "
                  ";
}

// Note that we stored our output in $out before printing it because we wanted to execute
// the search before including the header template. This is because the header template 
// displays the current search query in the search box (via the $input->whitelist) and 
// we wanted to make sure we had that setup before including the header template. 

if(!$config->ajax) include("./dmcheader.inc");

?>

 <div class="container">

	<div class"row">

		


		<div class="col-md-6">
		<?php if(!$config->ajax){ echo "<h2>Please enter a country name</h2>";} ?>

	
<form id='my_search_form' action='<?php echo $config->urls->root?>dmc-search/' method='get'>
				<input type='text' name='q' id='my_search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />
				<button type='submit' id='search_submit'>Search</button>
			</form>
		</div>
	</div>	
</div>
<?php

echo $out; 

if(!$config->ajax) include("./dmcfooter.inc"); 

                        		

[MuchDev]

Hey there Soma or someone else that may know. I would like to pack the js in this script into my aiom block and I don't want to hack too much. Is there a plan to allow for manual inclusion or should I just keep my modifications that I've made to the addScripts hook?

I've just hacked this line out and thrown the js into my aiom array. Seems to be working fine.

$script .= "\n<script src='{$this->config->urls->AjaxSearch}AjaxSearch.js'></script>";

[Soma]

@muchdev 

I went ahead and submitted a new version with a option to turn off automatic script injection. 

See https://github.com/somatonic/AjaxSearch#module-settings for further infos as you need to output the js config var used by the AjaxSearch.js manually too.

After all I'm not sure why you need this module at all. Just take the AjaxSearch.js and deinstall the module, as there's no reason to have it installed at all. This module was more a little fun helper back then, I'll maybe remove it from the modules.processwire.com.

[Roxanne]

Hi Soma, I'm new to ProcessWire and need to figure out how to input a search field that has autocomplete on it and I thought this would be the best module to start with. I've followed all the instructions but can't seem to get it to work. Could you upload some source code for me to look at?