October 31, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Fun with Auto-Complete Widgets

  • January 3, 2008
  • By Vlad Kofman
  • Send Email »
  • More Articles »

Unlike Yahoo, Google only shows the number of results and does not show similar or related keywords—called "concepts." Yahoo also shows text queries where the keyword is in the middle or the end. For example, a search for "java" also suggests "free java download."



Click here for a larger image.

Figure 4: Yahoo search assist

To implement this widget on your site, you can write all the logic from scratch or use one of the available AJAX widgets. I will look at widgets from Dojo, Scriptaculous, and Yahoo User Interface (YUI) libraries. They are all conceptually similar. They all send a asynchronous request to the server as soon as the user starts to type. As the response is received, they open a dialog on the client side, and populate it with suggestions from the server. Because this technology is server-side agnostic, you can use any application server on the back end.

Implementation in Dojo

To add a Dojo auto-complete combo box, you need to import main Dojo libraries (either on the page or in the main header if it is reused throughout the site).

You also need to declare dojo.widget.ComboBox and put the <select> tag with dojo parameters where you want the auto-complete text-field to appear.

Note: The select actually will be dynamically modified by the Dojo toolkit.

Also, note that one of the parameters, called dataUrl, needs to point to the server URL that will return suggestions.

...
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
   dojo.require("dojo.widget.ComboBox");
</script>
</head>

<body>
<select dojoType="ComboBox" value=""
   dataUrl="/tests/widget/comboBoxData.js"
   style="width: 200px;"
   name="auto_complete" maxListLength="15">
</select>

That is really all that you need to do to incorporate Dojo based auto-complete on the client side. Again, the server implementation could use any technology.

Figure 5 shows the result of typing just the letter "a" in the US state's auto suggest field.

Figure 5: Dojo Auto-complete demo

Please see the included source code for the full demo.

Implementation in the Scriptaculous Toolkit

Scriptaculous libraries are very similar in setup as those in Dojo, but require a little more code, and a specific response text format.

You need to define specific style for the div element.

<style>
div.autocomplete {
   position:absolute;
   width:250px;
   background-color:white;
   border:1px solid #888;
   margin:0px;
   padding:0px;
}
div.autocomplete ul {
   list-style-type:none;
   margin:0px;
   padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px;
   list-style-type:none;
   display:block;
   margin:0;
   padding:2px;
   height:20px;
   cursor:pointer;
}
</style>

You also need to import Scriptaculous JavaScript files on either the page where this feature should become visible or in the main header, if it is reused throughout the site.

</head>
<script language="JavaScript"
        type="text/javascript"
        src="js/ext/s17/prototype.js"></script>
<script language="JavaScript"
        type="text/javascript"
        src="js/ext/s17/scriptaculous.js?load=effects,dragdrop,
             controls"></script>




Page 2 of 4



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel