Support

Main » Knowledge Management Product » Version 3.0x + » Use live search results for Articles on any page

In KB 3.x, you can submit a question anytime, using the Contact form. What you'll notice when start typing your question into the form is real-time article suggestions, based on what you are typing.

These suggestions appear directly below the form:



This is all done in real-time, requiring no page reloads, or having to navigate away from the question form.

You can apply this concept to any HTML form.


Prepare your HTML form

In your knowledgebuilder/js folder, you'll notice a JavaScript file called livesearch.js. If you're adding this feature to another page within the KnowledgeBuilder site, include that file on the page where your HTML form resides.

Example:

<script type='text/javascript' src='{$_}/js/livesearch.js'></script>

If you're adding this feature to site files outside of the KnowledgeBuilder site, make sure to note the following:

• Replace instances of {$_} with http://yourdomain.com/kb/ or similar.
• Along with including the livesearch.js file from above, include additional JavaScript files:

<script type='text/javascript' src='http://yourdomain.com/kb/ac_global/scriptaculous/prototype.js'></script>

<script type='text/javascript' src='http://yourdomain.com/kb/ac_global/scriptaculous/scriptaculous.js'></script>

<script type='text/javascript' src='http://yourdomain.com/kb/ac_global/js/ac.js.php?inc=ajax,dom,b64,str,array,liveedit,utf,ui,paginator,
star,loader,tooltip,date,custom_fields,editor,form,class.Table,ihook'></script>

Your HTML form can contain any number of input fields, but the one that triggers the live search must have a couple of attributes:

id="livesearch_input"

onkeyup="livesearch(this, '{$_}/api.php')"

Example:

<textarea name="question" id="livesearch_input" onkeyup="livesearch(this, '{$_}/api.php')"></textarea>

Then, somewhere below this input field, you'll need two additional elements. One must contain id="livesearch_status", and the other id="livesearch_results". Also include class="ac_hidden" to both elements.

Example:

<div id="livesearch_status" class="ac_hidden"></div>

<div id="livesearch_results" class="ac_hidden"></div>

You don't have to use <div> elements in the example above, but for browser consistency, it's best to stick with <div>.

That's it! Your HTML form should now pull Article results dynamically, as you type


Things to be aware of

• The live search feature checks for matches for every five characters typed, three seconds after you stop typing. This is to avoid hitting the server for every single character, which would dramatically slow down the page and affect the user experience.
• The script will work for HTML editors (like TinyMCE), and standard HTML textareas.
• The live search scripts currently only look at the Articles. If you wanted live search for Comments, for example, these scripts wouldn't work.

• Print