Enhancing Search Boxes With YUI

Search boxes enable users to find what they need quickly and efficiently. By adding an auto complete (or search assist) effect to these boxes, web designers further aid their users by expressing their site’s content through suggested search terms.

Hand coding an auto complete system can be tough and unappealing. Luckily, the Yahoo! User Interface Library (YUI) makes this much easier with it’s AutoComplete control.

To begin using AutoComplete, we must include these files in our HTML markup:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/autocomplete/assets/skins/sam/autocomplete.css" />

<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/autocomplete/autocomplete-min.js"></script>

It is also necessary to apply the “yui-skin-sam” class to the body tag of our HTML:

<body class="yui-skin-sam">

Let’s look at the markup that contains the above properties and a search box for our auto complete:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/autocomplete/assets/skins/sam/autocomplete.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YUI AutoComplete</title>
</head>

<body class="yui-skin-sam">
<form id="search-form" action="">
	<input type="text" id="search-box" name="search-box" />
	<input type="submit" value="Search!" id="submit" name="submit" />
</form>
<div id="container"></div>

<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/autocomplete/autocomplete-min.js"></script>
</body>

</html>

Now it’s time to code the effect in JavaScript. First, we must create a data source in which to store our suggested search terms. For example, if we wanted to aid a user in searching for a country, Canada, Mexico, and the United States of America would probably be included in the various search terms.

We start off by creating an array which contains the various search terms:

var countries = new Array("United States", "Canada", "Mexico", "Russia", "India", "China", "Mongolia", "Romania", "Morocco");

Next, we need to initialize a LocalDataSource object with this array passed as a parameter:

var myDataSource = new YAHOO.util.LocalDataSource(countries);

And finally, we need to create an AutoComplete object, which requires three parameters:

  1. The id of our search box
  2. The id of a container containing the auto complete results
  3. The data source that should be used

Looking back at the HTML, we see that the id of our search box is “search-box” and the id of our div container is “container”. Now we have:

var myAC = new YAHOO.widget.AutoComplete("search-box", "container", myDataSource);

And so our auto complete is active. Unfortunately, some elements have problems. We can fix this up by styling our document:

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#container, #search-box {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 14px;
	width: 200px;
	padding: 2px;
	margin: 20px;
}

#container {
	margin: 22px 0 0 18px;
}

#submit {
	padding: 2px;
	margin: 20px;
	margin-left: 230px;
}
</style>

Here’s the final source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/autocomplete/assets/skins/sam/autocomplete.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YUI AutoComplete</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#container, #search-box {
	font-family: "Trebuchet MS", Helvetica, Sans-Serif;
	font-size: 14px;
	width: 200px;
	padding: 2px;
	margin: 20px;
}

#container {
	margin: 22px 0 0 18px;
}

#submit {
	padding: 2px;
	margin: 20px;
	margin-left: 230px;
}
</style>
</head>

<body class="yui-skin-sam">
<form id="search-form" action="">
	<input type="text" id="search-box" name="search-box" />
	<input type="submit" value="Search!" id="submit" name="submit" />
</form>
<div id="container"></div>

<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="https://yui.yahooapis.com/2.6.0/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript">
var countries = new Array("United States", "Canada", "Mexico", "Russia", "India", "China", "Mongolia", "Romania", "Morocco");
var myDataSource = new YAHOO.util.LocalDataSource(countries);
var myAC = new YAHOO.widget.AutoComplete("search-box", "container", myDataSource);
</script>
</body>

</html>

There we go! You can view the demo here or download it. Start typing in “United States” and watch how the auto complete helps you out :) .

Leave a Reply

Enhancing Search Boxes With YUI