When your visitors use your site search function, the results will be highlighted to make it easier to identify them.Hi Guys,
In this session i will show you a nice way to improve usability experience of your homepage.
When your visitors use your site search function, the results will be highlighted to make it easier to identify them.
Example:
Try to search for "CMS". Now at result page, click an entry. Notice the highlighted word "CMS" now.
Copy that code and replace it with the Results-Template of your Searchmodule. You find it at Modules->Search->Last Tab (Results Template):
<div class="searchresults">
<h3>{$searchresultsfor} <strong>"{$phrase}"</strong></h3>
{if $itemcount > 0}
<ul>
{foreach from=$results item=entry}
<li><a href="{root_url}/{$entry->url}?searchstring={$phrase}">{$entry->urltxt}</a> ({$entry->weight}%)</li>
{/foreach}
</ul>
{else}
<p><strong>{$noresultsfound}</strong></p>
{/if}
</div>
If you have a very complex template, you can also modify it because the only thing we add here is "?searchstring=".
Save it and now go to your site template.
This is the code you need to implement in your Template. In your template find "{content}" and replace it by this:
{content assign="content"}
{assign var="searchstring" value=$smarty.get.searchstring} {if $searchstring != ''}{$content|replace:"`$searchstring` ":"<span class="\"searchstring\"">`$searchstring`</span> "}{else}{$content}{/if}What is going on here? First we assigned the content tag to a variable because we need to modify the output of it. Next, we take a look at the URL on our resultspage which looks somehow like this now (with mod_rewrite enabled): /mypage.html?searchstring=word
Finally we check the URL for the searchstring. If it is available, we modify the content output to wrap our searchterm with a <span> element. This allows us to style the term with css. Otherwise, if no searchterm exists, we output the regular content.
That's all! Now it depends on you how you want to highlight the searchresults. You can add something like this to your stylesheet:
.searchstring {color:red} or .searchstring {font-style:italic}
