Lateral Code

A Web Development Blog Focused on Code and Technology

Currently Browsing: Home » Enhancing Search Boxes With YUI

Enhancing Search Boxes With YUI

By Karthik Viswanathan

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="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://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="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://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:

The id of our search box
The id of a container containing the auto complete results
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="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://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 .

Tags: javascript

This entry was posted on Sunday, January 4th, 2009 at 14:38:05. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “Enhancing Search Boxes With YUI”

Yates Rag says:

Tue 6 January, 2009 at 13:19:35

That’s one nifty little piece of code, will be trying this out soon.

Reply
Abhilash says:

Sun 11 January, 2009 at 21:21:17

Hi dude,

Good demo

Reply
Rodrigue Hunel says:

Wed 22 April, 2009 at 05:22:25

Hi,

This tutorial sounds good…Could you contact me on my email for a translation please ?

Regards

Reply
Vamsi says:

Mon 18 October, 2010 at 03:44:36

Awesome tutorial.
I have done a php script which generates multiple JS arrays..can YUI use multiple arrays as myDataSource ??

Thanks

Reply
- Karthik Viswanathan says:
  
  Mon 18 October, 2010 at 04:03:20
  
  Hey Vamsi,
  
  You can combine your arrays using the concat method (see here). Once you join them together, you can use the resultant array as the data source parameter.
  
  Karthik
  
  Reply

DotNetShoutout

Click here to cancel reply.

Lateral Code

Enhancing Search Boxes With YUI

6 Responses to “Enhancing Search Boxes With YUI”

Leave a Reply

Sponsors

Search

Pages

Recent Posts

Archives