I have just added a new live search functionality to the new topic, new ticket and search pages on the Joomlabamboo site. So now when you type a word into the title box of your next ticket or forum thread you will see a list of items that may be relevant for your question.

How does it work?

The live search basically filters a static list of items that can be found on the Joomlabamboo network and displays the relevant articles based on the exact words entered into the list. It's yet to have relevant / useful forum posts added to the list of keywords and we may find that it's worth refining the list depending on user feedback. I decided not to make this dynamic and search the database mainly because it is going to be easier to curate the list of topics if the items are in a static list.

How did we make it?

The code that filters the list is remarkably simple and was orginally found on this design chemical forum post. By following these steps it will be possible to add a live search for items in your own static list to the core Joomla search functionality.

1. First you need to create the data list that you are goign to be searching through.

We have a static html file that we are maintaining on the server which has a list of items. Literally a whole page of

Links to awesome content.

. As I said before this is much easier to maintain and curate rather than writing complex code to establish relevance via a mysql query.

1. We then added some jQuery to our template that loads the file when the relevant input is typed into. You need to ensure that jQuery is already loaded on your site.

   jQuery("#docs").load("path/to/your/data.html.html", function() { jQuery("#search-searchword").on('keyup', function() { // Retrieve the input field text and reset the count to zero var filter = jQuery(this).val(), count = 0; jQuery("#docs-list").fadeIn(); // Loop through the comment list jQuery("#docs li").each(function() { // If the list item does not contain the text phrase fade it out if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) { jQuery(this).fadeOut(); // Show the list item if the phrase matches and increase the count by 1 } else { jQuery(this).show(); count++; } }); }); });
   
   
   
   

2. Add the container that the filtered list gets injected into to your search or Kunena template.

   
   

   Related items

Adding this to Kunena

To add this type of functionality to Kunena you need to locate the topic/edit.php file and then locate the input for the title of the new forum topic. Ensure you change the target input from the code above from #search-searchword to #subject. If you are adding this to another component then this is going to be crucial for you to get this working correctly.

<input type="text" class="kinputbox postinput required" name="subject" id="subject" size="35"

maxlength="200" value="" tabindex="1" />

To add this to the core Joomla search function

1. Create an override for the Joomla Search component in your template by copying the file: components/com_search/views/search/tmpl/default_form.php and pasting it in your template directory to the following location:

templates/your template/html/com_search/search/

1. Copy the html from above into this file. You may want to hide the div first of all using css.

If you have followed the steps outlined above you should now have some awesome live (kind of) search function added to your site.

blog comments powered by Disqus