[plugin] [ORPHAN] cbs_live_search

cbeyls · 2006-07-13 02:39:22

THIS PLUGIN DOESN’T WORK ANY LONGER IN CURRENT VERSIONS OF TEXTPATTERN.
Please use its replacement, etc_query

Introduction

This is a new live search implementation written from scratch for Textpattern with code efficiency and best user experience in mind. It uses either the jQuery or MooTools javascript library (since v0.8).

More information

For complete information about the plugin, please look at the official page on the Textpattern Resources Site.

Last edited by uli (2012-11-14 21:04:45)

cbeyls · 2006-07-15 01:08:57

In answer to EJ (who posted a comment on the Textpattern resources site)

To create the “clear query” button, it’s not complicated: just read the documentation! Yes, it’s this parameter named “resetimage”. Specify the URL of an image you want to display as a clear button and it will appear next to the search box. It’s created using javascript, so it will not appear if javascript is disabled (and it should not because clicking on an image never does anything when javascript is disabled). Of course I could also have used a standard form reset button, but it’s more esthetically pleasant with an image and you have more control over the design (when it’s a button, you don’t know its exact dimensions).

To talk a little bit more about the documentation: Every good programmer enjoys writing code and usually doesn’t like writing documentation but he knows he should do it anyway. Personnaly I create Textpattern plugins for my own needs and I don’t need to write documentation for them because I know how they work, but I have spent quite a lot of time making them customizable and accessible to anyone especially by writing a complete documentation (and this plugin has the biggest one). Ironically, the documentation is nearly always bigger than the code itself. So, please take the time to read it.

So actually, the site you mention is not a demo site, it’s just my personal website but because I’ve written the plugins for it, you can of course watch them in action there. I’ll release a new one soon.

Last edited by cbeyls (2006-07-15 01:11:10)

Infi · 2006-07-15 01:18:08

Very sweet. Works like a charm and the animation effects are highly unobtrusive. Nice work!

Haven’t done much testing yet, so the initial analysis will be cursory, at best. Hey, part of my $dayjob is beta-testing, so I have to review every new thing that comes along. ;) (Still no excuse.)

Straightforward and super easy to style.
Some will miss the arrow-key usage inherent in the Wilshire script.
A nice option would be to set what’s displayed when there are no results. As is, it’s ’0 article [sic] found’.

Just a note for users: Seems to work a tad slower with the ‘working’ image. Such images are generally small in file size already, but make yours even smaller if you can. It also pops up and disappears a lot as differing search results are displayed. Might want to bear that in mind if you use it. Would be cool to some; annoying to others. :)

No bugs found so far, but I can only test in FF and IE, atm. Firebug’s happy here, but a scriptor will tear it apart for you far better than I, I’m sure.

P.S. Put your search form above another div element and watch how smoothly Ajaxified Live Search pushes it out of the way. ;) Nice. (Oh, and good documentation.)

Last edited by Infi (2006-07-15 01:28:34)

cbeyls · 2006-07-15 13:55:36

Yes, I was using the wilshire script before but I didn’t like the keyboard feature (and it was not working in Safari on mac I think).

As for my script, I have tested it using: the evil IE (Windows), Firefox (Windows), Opera 9 (Windows, note that Opera 8 should work but the transparency effect will not be visible), Camino (Mac), Safari (Mac).

At first I wanted to use script.aculo.us for the visual effects then I realized that this library not only was huge but the scale effect didn’t work as expected so I needed to implement my own effect to make it work. Then I switched to the excellent moo.fx library: my code became simpler and I could use the built-in effects.

You’re right, I should add the message to be displayed when no result is found in the options list. I’ll probably add it soon. I didn’t like the idea of having this message written as a javascript parameter in the page but anyway it will be useful for some people so it’s worth adding it.

Finally you must know something about the wilshire plugin: all its code is wrapped in a single function, including the live search processing code. When the AJAX request occurs, Textpattern starts to generate an entire HTML page and when it encounters the live search plugin, the processing will stop, it will perform the search and then exit, writing the results. This is not efficient because you don’t want to start building a full HTML page when you just need to perform a search query and output a little piece of HTML.
So what I did it to prevent that is making the search part of my plugin register itself as a textpattern callback: this code is called BEFORE the page starts to be generated.

Destry · 2006-07-17 09:24:05

I’ve packaged the three files necessary for this plugin into a zip file and added it to the plugins archive. A little more accessible and convenient this way. You can take advantage of the associated docs page also to expand on the existing documentation in whatever way you want.

A TxB account is on it’s way to you, Christophe, in case you would like to add your other plugins in there and help keep them up to date (no obligation, just an option).

Infi · 2006-07-21 15:33:17

Quick question… When I use the resetimage option, the image is always in view. It appears to be positioned the same as the ‘working’ image, which shows up only when the results are open, so there must be some simple thing I’ve overlooked to make the reset appear only when needed.

?

BTW, I’m really impressed with the small size and lean code. I’ve replaced the search on one project with this one and the owner is well-pleased. Thanks for an awesome plugin!

cbeyls · 2006-07-23 20:46:08

New version released: 0.2

A tiny bug fix and lots of new functions (and I’ve listened to your suggestion, Infi). Here’s the full changelog:

Added the “defaultvalue” parameter to display an invitation text in the search box
Added the “webkit” parameter for an improved search box in Apple Webkit-based browsers
Added the “noresults” parameter, allowing to specify the text to display in the results list when no results are found
The search box can now be styled differently when inactive
The reset image is now only visible when the search box is not empty
Images are now shown and hidden in a more efficient way by toggling their visibility attribute
Images can now be styled individually, thanks to a different CSS class applied to each one
Changed the way the label is displayed so it can be hidden through CSS
Fixed the results box scaling to wrong dimensions when it has a CSS border
The server now returns an empty response when no results are found
Improved documentation. Please read it carefully again if you are upgrading.

Enjoy!

Infi · 2006-07-24 19:19:49

Hokay. I’ve done something silly, because I get no returns and this from Firebug:

no element
anonymous prototype.js (line 549)
anonymous prototype.js (line 83)
anonymous prototype.js (line 550)
anonymous prototype.js (line 753)
anonymous prototype.js (line 20)
anonymous livesearch.js (line 114)
anonymous livesearch.js (line 51)
anonymous prototype.js (line 1363)

Plugin is activated; js calls are in place. I’ve tried the tag with and without options, but still no returns. Ideas?

cbeyls · 2006-07-24 23:15:51

Have you upgraded both the javascript file and the plugin file?

Infi · 2006-07-24 23:47:00

Heh. How silly of me. Whatta you know? It works. :)

cbeyls · 2006-07-25 01:36:35

If you are using the plugin on your website, please post the address in this topic, I would be curious to see your implementation :)

Fredb7 · 2006-07-26 03:32:34

First, thank you.

It’s working perfectly.
Really great customization is possible.
I miss the arrow-key usage of the Wilshire script a bit, but it’s not a big deal.

A small problem:
The noreults <code><p></code> doesn’t appear in Safari (OS X 10.4.7 Safari v419.3). (Working in FF and Camino)
I tried with no css to be sure. No go.

I just need to fix this and it’s all set.

Thanks for your time.

Last edited by Fredb7 (2006-07-26 03:33:23)

Textpattern CMS

Textpattern CMS support forum

#1 2006-07-13 02:39:22

[plugin] [ORPHAN] cbs_live_search

#2 2006-07-15 01:08:57

Re: [plugin] [ORPHAN] cbs_live_search

#3 2006-07-15 01:18:08

Re: [plugin] [ORPHAN] cbs_live_search

#4 2006-07-15 13:55:36

Re: [plugin] [ORPHAN] cbs_live_search

#5 2006-07-17 09:24:05

Re: [plugin] [ORPHAN] cbs_live_search

#6 2006-07-21 15:33:17

Re: [plugin] [ORPHAN] cbs_live_search

#7 2006-07-23 20:46:08

Re: [plugin] [ORPHAN] cbs_live_search

#8 2006-07-24 19:19:49

Re: [plugin] [ORPHAN] cbs_live_search

#9 2006-07-24 23:15:51

Re: [plugin] [ORPHAN] cbs_live_search

#10 2006-07-24 23:47:00

Re: [plugin] [ORPHAN] cbs_live_search

#11 2006-07-25 01:36:35

Re: [plugin] [ORPHAN] cbs_live_search

#12 2006-07-26 03:32:34

Re: [plugin] [ORPHAN] cbs_live_search

Board footer