Module AjaxSearch

Soma · May 17, 2012

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 · May 17, 2012

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 · May 17, 2012

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 · May 17, 2012

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

ryan · May 17, 2012

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 · May 18, 2012

Very nice. Great work, thanks for sharing this

Mats · December 2, 2012

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 · December 2, 2012

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 · December 2, 2012

Thanks for looking into it. Much appreciated!

Soma · December 2, 2012

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 · December 2, 2012

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 · December 2, 2012

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 · December 2, 2012

Works like a charm! Thanks again!

Username · May 21, 2013

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 · March 30, 2014

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 · March 31, 2014

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

chriswthomson · May 22, 2014

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 · May 22, 2014

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 · May 22, 2014

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

davo · June 16, 2014

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 · June 16, 2014

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 · June 16, 2014

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 · October 26, 2014

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 · October 28, 2014

@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 · October 21, 2015

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?

Sign In

Module AjaxSearch

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content