Recipe 6.6. Highlighting the Search Term

Problem

You want to make it clear to site visitors what they searched for when they view a results page.

Solution

Combine a stylesheet rule with a PHP text-processing function to make the search term stand out.

For this Recipe, let's assume you have a search form that queries a database for articles, like this:

 <form action="/search/search.php" method="post"> <input name="arg" type="text" value="" size="10" maxlength="20"> <input type="submit" value="Go"> </form> 

The value of the <input> field arg gets passed to the search.php script and becomes the variable $arg. First, add a rule to your stylesheet that will highlight this block of text, as shown in Figure 6-3:

 .arg {     background-color: #00CCCC;     font-weight: bold; } 

Then add a line to the results page that simply prints the search term, wrapped in the style:

Figure 6-3. Highlighting the search term on the results page confirms for visitors that they got what they requested

 echo "You searched for <span class=\"arg\">".$arg." </span>"; 

You also can create a custom PHP function (or modify one you've already made to handle other text-processing tasks) to highlight the search term in the body of the article that the visitor requests from the results page:

 function processText($text,$arg) { …other text-processing commands… $text = str_replace($arg,"<span class=\"arg\">".$arg."</span>",$text); return $text; } 

This processText( ) function takes two parameters: the full text of the article to be displayed and the search term. In the article links on the results page, you'll need to pass the $arg variable on to PHP template that displays articles. Figure 6-4 shows how it might look to a visitor.

Figure 6-4. You can extend the feedback mechanism by highlighting the search term on pages linked from a results page

Discussion

Web surfers fall into two behavior groups: there are browsers and there are searchers. Both groups have one thing in common, though. When they get to your site, they almost always have a specific goal in minda question in search of an answer. Many web surfers will dutifully follow your navigation in hopes it will lead them to what they're seeking. Others go straight to your search box to cast about for the page that will give them what they came for.

Small details separate a frustratingor even just averageweb site experience from a great one. Whether they know it or not, web surfers take comfort in a web site that strives to establish continuity while they use the site to get what they want. Like well-written link phrases and page titles, highlighting the search term on your results page makes it easy for visitors to your site to understand what they asked for and what they got. When visitors can make quick decisions about the relevance of the information they're viewing, they leave satisfied in knowing that the site can meet their needs.

See Also

Recipe 2.5 explains the importance of establishing a naming convention.

Recipe 4.7 describes ways to convert characters in text stored in or retrieved from a database to their proper HTML entities.

Recipe 6.2 explains how to guide visitors to the page they're seeking.