AutoComplete input box

For the improvement of user experience on a web site it is useful to provide a autocomplete element on some inputs. On the Internet there are many scripts available for download which implement autocomplete functionality. Unfortunately most of them are not functioning properly in all web browsers or have other important drawbacks - are not skinable, not flexible for different uses, etc. We want to implement a good autocomplete widget which would not have all the mentioned disadvatages.

Taggings:

Submitted by Lukas Kavicky on Tue, 11/16/2010 - 21:16
3 answers

YUI 2: AutoComplete

The AutoComplete control provides the front-end logic for text-entry suggestion and completion functionality. See the Yahoo! UI Design Pattern Library description for AutoComplete to get a fuller sense of the underlying design patterns in the AutoComplete family. AutoComplete provides a high degree of configurability so developers can implement these design patterns quickly and flexibly. Top features include custom formatting, query delimiters, animation, custom formatting, a rich Custom Event model, and much more.

visit http://developer.yahoo.com/yui/autocomplete/

Submitted by Christina Unterberger on Fri, 11/26/2010 - 09:01

Taggings:

Prototype Autocomplete

Prototype is a JavaScript framework that makes web development a lot easier.
You can download it at www.prototypejs.org

You can use prototype to create an AutoComplete input box:

At first you'll need to include prototype into your website:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="autocomplete.js"></script>

Now create an input box

<input type="text" name="q" id="query" />

and an instance of your Autocomplete object:

<script type="text/javascript">
new Autocomplete('query', { serviceUrl:'service/autocomplete.ashx' });
</script>

If you want, you can add further options:

new Autocomplete('query', {
serviceUrl:'service/autocomplete.ashx',
minChars:5,
maxHeight:350,
width:400,
deferRequestBy:100,
// callback function:
onSelect: function(value, data){
alert('You selected: ' + value + ', ' + data);
}
});

autocomplete.ashx will receive the GET request with the querystring ?query=Know - it must return JSON data as follows:

{
query:'Know',
suggestions:['Knowledge Management','Knowing','Know How'],
data:['KM','KN','KH']
}

Submitted by Bernhard Fischer on Thu, 11/25/2010 - 23:16

jQuery UI - autocomplete

jQuery is a powerful javascript liberary, which dramatically simplify the manipulation of elements on a web page and much more.
jQuery UI is a set of user interface objects implemented by jQuery. jQuery UI contains an autocomplete widged which I find very useful.

To implement the widget:

  1. Download the jQuery UI liberary from http://jqueryui.com/download
  2. Place the needed javascript files on your web server. These files are:
    • jquery.js
    • jquery-ui.js
    • jquery.ui.core.js
    • jquery.ui.widget.js
    • jquery.ui.autocomplete.js
  3. Add a script tag to the header of your page for each of these files, e.g.
    <script type="text/javascript" src="js/ui/jquery.ui.autocomplete.js"></script>
     Where js/ui is the relative path to the folder where your files from previous point are located.
  4. Add a javascript into you source code:

    $(function() {
    $( "#i1".autocomplete({
    source: "data.php",
    minLength: 1
    });

    });


    Where i1 is the ID of the input field you want to have autocomplete on. 'data.php' is the file responding to the queries of the widget.
Submitted by Lukas Kavicky on Tue, 11/16/2010 - 21:33