Retaining Spaces and Quotes in Search Text Boxes

I am all about crafting usable forms on my Web pages. I give a lot of thought to the user experience which is why I was recently bugged over the search environment on my Web sites. You see, I often post back (or is it postback?) to the same page and dynamically return submitted text into the value attribute of the input field after users perform keyword searches. In other words, if a user looking for information about widgets on one of my sites types the word widgets in the search field they are returned a result set AND the word widgets will reappear or repopulate in the search box. This provides my visitors with visual confirmation of the word they just used in their find operation as well as the option to modify the word (or term) or even delete it entirely and start over.

However, until earlier this week I was irritated because the process didn't really work the way I wanted it to. Why? When users included a space or spaces as part of their search text the returned value would truncate or prematurely "cut off" at the empty character and only the initial word of the phrase would be returned back into the search box field. I was very distraught over this premature concatenation! Not a HUGE deal from a functionality standpoint but amateurish and less elegant than I wanted it to be from a usability perspective.

Typing a space or character between words of a phrase in a text box during a search...

caused the second word to be trimmed off or clipped at postback.

Another gripe stemmed from my realization that people never type quotes around phrases when performing searches. No matter how much I promote this technique visitors rarely remember to include double quote marks around word sets inputted into my search boxes.

This is important because I primarily use a MySQL database with full-text indexing and boolean search logic as the backbone repository for all my sites' content. Consequently, search queries work best when phrases are encapsulated by quotation marks which act as modifiers or operators to match indexed rows against particular word sequences.

On a side note, does anyone remember the BG era (Before Google)? I remember we were taught to type quotes around phrases when performing lookups in AltaVista. This technique has been deprecated by Google so maybe this is why people don't bother to surround search phrases with double quotes anymore. Who knows?

Anyhoo, I was in dire need of a prompt that would alert or remind people to consider typing double quotes around their phrases which would in turn aid them in retrieving the most relevant information available in my database tables.

Neither of these issues were particularly difficult to fix. I just needed an hour or so to think about it and do a wee bit of background research. Below you can see how I addressed both fixes on my search page named index.php.

The first fix utilized PHP. I used the string replace (str_replace) to find all instances of spaces in a user's search phrase and replace them with the HTML equivalent of  , and to find all instances of double quotes (i.e. quotation marks) and replace them with the HTML equivalent code of ".

Double quotes and spaces are now retained in the text box after the search form has posted.

The second fix utilized Javascript validation. A confirmation is now triggered whenever a search phrase contains spaces but is not enclosed in quotation marks. The js alert suggests or recommends typing double quotes around the text in the search box to return a better and more narrow result.

Users are now greeted with a javascript confirmation if they type a space or spaces between search terms and DO NOT surround them in double quotes.




<?php
$search_term = $HTTP_GET_VARS['search_keywords'];
$count_characters = strlen($search_term);
while($n <= $count_characters)
{
$search_term_tmp = str_replace(" ", "&nbsp;", $search_term);
    $search_term_final = str_replace("\"", "&#34;", $search_term_tmp);
$n++;
}

$search_performed = "1"; //used to determine if keyword field has been filled out
if (isset($HTTP_GET_VARS['search_keywords']))
{
$search_performed = (get_magic_quotes_gpc()) ? $HTTP_GET_VARS['search_keywords'] :
addslashes($HTTP_GET_VARS['search_keywords']);
}
?>
----
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function check()
{
string = document.search_form.search_keywords.value;

if ((string.indexOf(' ') != -1) && (string.charAt(0)!='"') && (string.indexOf('+') == -1)) {
var answer = confirm('It appears you typed a space(s) in the search box. If this is a phrase (i.e. not a series of keywords), click Cancel and type quotes around \"' + string +     '\" to return better results. Or, click OK to contine with your search.');
if(answer == false)
{
document.search_form.search_keywords.focus();
return false;
}
return true;
}
//-->
</script>
</head>

<body>
keyword(s):
<form name="search_form" method="get" action="index.php?search=true" onSubmit="return check();">
&nbsp;<input name="search_keywords" type="text" size="20"
<?php if ($search_performed == "1") {echo ""; } else
if ($search_performed != "") {echo "value=".$search_term_final; } else
if ($search_performed == "") {echo "";} ?>>
<input type="submit" name="Search" value="Search">
</form>
</body>
</html>