Hi,

the K2 Tools module acting as a live search box worked great for me, however I decided it was time to improve it a bit to suit my needs. I can honestly say that the groundwork for massive improvement has been properly laid (the code is VERY clean and straightforward), and it does not take that much time at all to make the default module work and act as 3rd party paid extensions.

Unfortunately, the one core file I had to rework to suit my needs was the main JS: components/com_k2/js/k2.js. Here is the code I am currently using, and I would really like if the devs could offer some feedback, perhaps we can make it even more awesome :)

(I will paste only the portion of the code related to Live Search function, the comments are below):

* please note that I am using view.myview.php because I require images, item categories, etc. The easiest way to build it is to modify view.raw.php to suit your own needs

Comments (for non-developers and people with less experience):

(1) the searchTimeout variable is used to add the timeout between keystrokes. I've set it to 250 ms, seems to work for me, but it can be tweaked further. What do we achieve? Say there's no timeout and out search word is "joomla". keyup() reacts to each keystroke immediately, so even though we don't see it, even if we type the word in 0.1s, there are 6 queries: "j", "jo", "joo", "joom", "jooml" and "joomla". By adding a 250ms timeout, the script waits for us to pause for at least 250ms before sending a request. This way, we can type relatively slowly and still send a single query to the server, instead of 6, dropping the load.

(2) the searchWord variable is one way of solving yet another keyup problem: it reacts to EACH keystroke, even if we press CTRL, or use arrows to move the cursor, in this case by sending yet another request to the server. The searchWord and newSearchWord variables are used to check if the input field contents have been changed after a keystroke; if so, the request is sent. If not, nothing happens. Please note that there is now an additional condition in the line beginning with "if ($K2(this).val().length...".

(3,4,5,6) just cosmetic improvements; instead of using .css('display', 'block') and .css('display','none'), I am now using the integrated jQuery fade() which makes things a lot nicer. The line (3) can be removed because instead of "else" at the end, we have a new condition (6) which fades the result window out and clears its contents as soon as the input box contains less than 3 chars. "Else" was not working because of the added "searchWord condition". If the result window is already displayed and we change, for example, a single character in the search box, there is no need to clear, remove and redraw it, hence (5) CUSTOM.

If you want to be able to close the result window by clicking outside of it, here's an interesting piece of code I found:

The code can be added, say, to your custom result view or pretty much anywhere at your own convenience.

Hope somebody finds this useful, it took me a day's work, but I've saved me some 35 USD :)

Once again, kudos to the K2 team, I never forget to tell these guys how much they mean to me :)

PS the livedemo of my "improved" search should be available in a day or two and I'll be glad to post it here :)

Great work Nikola :)

This looks really nice. I look forward to testing it.

Hey there,

sorry it took me a while, but the website containing my modifications is up. We've had other, non-web-related troubles :(

Anyway, the address is: izdavastvo.filfak.ni.ac.rs

This website is a publications catalog for the Faculty of Philosophy in Niš, Serbia. It is cyrilic, howerer you can test the search module by typing, for example, "philo" or "годиш" (copypaste then hit space to activate keyup event). I guess there is room for improvement (live pagination etc) but I think it's a pretty good start.

The filtering module on the right is a 3rd party extension, however now that I feel more relaxed about tweaking K2, I might try to create a similar free version of this for community.

If you have any suggestions, please ... shoot :)

Cheers!

PS I've submitted the main Faculty of Philosophy website for the Showcase on getk2.org, but it never got published. I did everything according to guidelines, is there something else I should be aware of? By the way, the website relies heavily on K2 and its templating system, and features error-proof content entry forms for non-experienced users (an idea of mine I posted about some time ago - overriding userform.php and creating several different overrides in a single file using itemid).

It is actually pretty nice Nikola.
I actually think this something worth into turning into an actual product.

When did you submit your site to the showcase?