Dojo Auto completer

Complete Java Server Faces (JSF) Tutorial - JSF Tutorials. JSF Tutorials at Rose India covers everything you need to know about JSF, This JSF Tutorial contains readable and interesting content organized in proper and sequential manner. Each concept has been explained by simple examples so that you can understand easily and implement immediately into your java web application. It provides coverage of key JSF concepts such as User Interface(UI) components, Renderers, Backing beans, Validators, Converters, Navigation, Event handling, Expession language, Messages etc...

Dojo Auto completer


In this section, you will learn how to create a auto completer in dojo. 

Auto Completer: The Auto Completer provides the front-end logic for text-entry suggestion and completion functionality. The features of the auto completer to control navigation of the suggestions container via up/down arrow keys and rich event model. Easily to configure its included parameters and custom formatting of auto completer suggestions, query delimiters (Multiple selections per input box), configurable query delay, type-ahead, animation of suggestions container, built-in query caching and much more.

The Combo Box is a hybrid between the combo box and text field. It provides a list of acceptable values. This is good for open-ended multiple choice questions.  Rather than having two fields - a combo box and an Other text box - you can use just one field.

Here is the code of Program:

  <title>Auto Completer Combo</title>
  <style type="text/css">
  @import "../resources/dojo.css";
  @import "../dijit/themes/tundra/tundra.css";

  <script type="text/javascript" src="dojo.xd.js"
    djConfig="parseOnLoad: true"></script>

  <!-- combo box -->
  <script type="text/javascript">

  <body class="tundra">
  <h2>Auto Completer Combo box</h2>
  <select dojoType="dijit.form.FilteringSelect" name="sname" 
  autocomplete="false" value="Vinod">
  <option value="Vinod">Vinod</option>
  <option value="Vikash" >Vikash</option>
  <option value="Deepak" >Deepak</option>
  <option value="DeepakSir" >Deepak Sir</option>
  <option value="Arun" >Arun</option>
  <option value="Amar" >Amar</option>
  <option value="Aman" >Aman</option>

Output of Program:


Share on Google+Share on Google+

Dojo Auto completer

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: Dojo Auto completer  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
October 4, 2011
Dynamic Autocomplete

Good tutorial, but is there any tutorial for getting the data for autocomplete from a database ??