Jump to content


Photo

AjaxSearch

Module

  • Please log in to reply
13 replies to this topic

#1 Soma

Soma

    Hero Member

  • Moderators
  • 3,204 posts
  • 1754

  • LocationSH, Switzerland

Posted 17 May 2012 - 06:32 AM

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


PastedGraphic-1.png

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.

@somartist | modules created | support me, flattr my work flattr.com


#2 apeisa

apeisa

    Hero Member

  • Moderators
  • 2,526 posts
  • 854

  • LocationVihti, Finland

Posted 17 May 2012 - 07:16 AM

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

#3 Soma

Soma

    Hero Member

  • Moderators
  • 3,204 posts
  • 1754

  • LocationSH, Switzerland

Posted 17 May 2012 - 07:21 AM

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.

@somartist | modules created | support me, flattr my work flattr.com


#4 apeisa

apeisa

    Hero Member

  • Moderators
  • 2,526 posts
  • 854

  • LocationVihti, Finland

Posted 17 May 2012 - 07:44 AM

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

#5 ryan

ryan

    Hero Member

  • Administrators
  • 5,774 posts
  • 3122

  • LocationAtlanta, GA

Posted 17 May 2012 - 12:33 PM

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.

#6 einsteinsboi

einsteinsboi

    Jr. Member

  • Members
  • PipPip
  • 10 posts
  • 5

  • LocationAuckland, New Zealand

Posted 18 May 2012 - 06:09 PM

Very nice. Great work, thanks for sharing this :)

#7 Mats

Mats

    Distinguished Member

  • Members
  • PipPipPip
  • 77 posts
  • 26

  • LocationKalmar, Sweden

Posted 02 December 2012 - 08:58 AM

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

#8 Soma

Soma

    Hero Member

  • Moderators
  • 3,204 posts
  • 1754

  • LocationSH, Switzerland

Posted 02 December 2012 - 12:28 PM

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.

@somartist | modules created | support me, flattr my work flattr.com


#9 Mats

Mats

    Distinguished Member

  • Members
  • PipPipPip
  • 77 posts
  • 26

  • LocationKalmar, Sweden

Posted 02 December 2012 - 12:32 PM

Thanks for looking into it. Much appreciated!

#10 Soma

Soma

    Hero Member

  • Moderators
  • 3,204 posts
  • 1754

  • LocationSH, Switzerland

Posted 02 December 2012 - 02:28 PM

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.

@somartist | modules created | support me, flattr my work flattr.com


#11 Mats

Mats

    Distinguished Member

  • Members
  • PipPipPip
  • 77 posts
  • 26

  • LocationKalmar, Sweden

Posted 02 December 2012 - 02:43 PM

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.

#12 Soma

Soma

    Hero Member

  • Moderators
  • 3,204 posts
  • 1754

  • LocationSH, Switzerland

Posted 02 December 2012 - 02:59 PM

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

Should be fixed now.

@somartist | modules created | support me, flattr my work flattr.com


#13 Mats

Mats

    Distinguished Member

  • Members
  • PipPipPip
  • 77 posts
  • 26

  • LocationKalmar, Sweden

Posted 02 December 2012 - 03:05 PM

Works like a charm! Thanks again!

#14 Username

Username

    Starter

  • Members
  • 1 posts
  • 0

  • LocationRussia

Posted 21 May 2013 - 10:19 AM

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







Also tagged with one or more of these keywords: Module

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users