Documentation

Get started

Here we use the demo app as an example.

<input type="hidden" name="customerNo" />
<input type="text" name="customerName" />           

<script>
    new Autocomplete("customerName", function() {
        return "suggest?q=" + this.value;
    });
</script>

The first parameter to new Autocomplete tells a text field by its name – "customerName".

The second parameter is a method definition, which tells a URL to fetch suggestions.

function() {
    return "suggest?q=" + this.value;
}

This will be invoked on keyboard events, as this.value refers to the value in text field, so if “v” is typed, the script will fetch from “suggest?q=v”.

Here is a sample data fetched, a bunch of <li> with onselect attributes.

<li onselect=" this.setText('Vitachrome Inc.') "> 
    <b>V</b>itachrome Inc.
</li> 
<li onselect=" this.setText('Vida Sport, Ltd') "> 
    <b>V</b>ida Sport, Ltd
</li> 
<li onselect=" this.setText('Volvo Model Replicas, Co') "> 
    <b>V</b>olvo Model Replicas, Co
</li> 
... ...

onselect will be invoked on selecting. Use this.setText() to update the text field.

<li onselect=" this.setText('Vitachrome Inc.') ">

You can update other fields as well.

this.setText('Vitachrome Inc.'); document.getElementsByName('customerNo')[0].value = '181'

Or refectory it to a setValue method.

this.setText('Vitachrome Inc.').setValue('181')

as we usually have our own definition of setValue:

<script>
    new Autocomplete("customerName", function() {
        this.setValue = function( newValue ){
            document.getElementsByName("customerNo")[0].value = newValue;
        };
        return "suggest?q=" + this.value;
    });
</script>

Think about this: customerNo is only updated by selecting an item, but the user may edit customerName without selecting anything, then customerNo will be out-of-dated. To resolve this, reset the customerNo on whenever customerName is changed.

So the final code will be:

<script>
    new Autocomplete("customerName", function() {
        this.setValue = function( newValue ){
            document.getElementsByName("customerNo")[0].value = newValue;
        };
        if (this.isModified) this.setValue("");
        return "suggest?q=" + this.value;
    });
</script>

Check this.isModified so it won’t be reseted if the name isn’t change, this will skip harmless control keys such as Esc, F1, Page Up, etc.

You have finished this and ready to start your own!

Few tips.

Use a doctype to triggers standards mode.
```
  <!DOCTYPE html>
```

Insert the .js .css files in <head>.

  <head>  
      <script src="/scripts/autocomplete.js" type="text/javascript"></script>
      <link rel="stylesheet" href="/stylesheets/autocomplete.css" type="text/css" />
  </head>

Create the autocomplete object after the text field (so the field can be found on runtime).

  <input type="text" name="customerName" />       
  <script>
      new Autocomplete("customerName", function() {

The this.value is already encoded by encodeURIComponent(), you don’t need to do it again.
```
  return "suggest?q=" + this.value;
```
If your suggestion contains ‘ or “ and need help on nested quotation escape, see this page on wikipedia. (The link opens a new window.)