• download
  • documentation
  • forums
  • demo
  • contact
  • blog

meteora

javascript widgets

Documentation

  • Autocomplete
  • Bubble
  • Calendar
  • Carousel
  • Datagrid
  • Dialog
  • Editor
  • Effect
  • Filebrowser
  • Form
  • Jsonrpc
  • Menu
  • Notebook
  • Picbox
  • Popup
  • Searchlist
  • Selection
  • Spinbutton
  • Tablesort
  • Toolbox
  • Treeview

What does this control do?

This control predicts the word or phrase the user wants to type in without actually typing it in completely. Nobody enjoys filling out forms!

For an usage example check out the Meteora.Autocomplete demo.

How to use it

In order to be able to use this control, paste this line of javascript right at the beginning of your script tag:

Meteora.uses('Meteora.Autocomplete');

An external input tag is required to attach the control:

<input type="text" name="name_of_the_input" id="test-input" />

You may then be able to invoke the Autocomplete Widget

new Autocomplete(
  // ELEMENT
  // The input's id (or an element's reference)
  'test-input',
  // OPTIONS
  {
    // Where to query for results, this response
    // requires a special format.
    'action': '/search/server-side-script',
    // What to do when the user clicks a result.
    'onClick': function(data) {
      // You may want to do something else
      alert('index: '+data.index+', content: '+data.content);
    }
  }
);

Server side response

This control will query for a special formatted result to the URL you specified in the action option.

/search/server-side-script?name_of_the_input=value
As value, it will send the text that is currently inside the input.

Here is a server side response example:

{
  "AF":"Afghanistan",
  "AL":"Albania",
  "DZ":"Algeria",
  "AS":"American Samoa",
  "AD":"Andorra",
  "AO":"Angola",
  "AI":"Anguilla",
  "AQ":"Antarctica",
  "AG":"Antigua and Barbuda",
  "AR":"Argentina"
}

To generate this response using PHP you'll have to write something like this:

$json->response(
  array(
    'AF' => 'Afghanistan',
    'AL' => 'Albania',
    'DZ' => 'Algeria',
    'AS' => 'American Samoa',
    'AD' => 'Andorra',
    'AO' => 'Angola',
    'AI' => 'Anguilla',
    'AQ' => 'Antarctica',
    'AG' => 'Antigua and Barbuda',
    'AR' => 'Argentina'
  )
);

Options

autoClose (default: true)

If true, allows the autocomplete interface to be automatically closed when the input loses it focus.

autoSelect (default: true)

If true, highlights any match within already existing results while user is still typing.

onClick (default: null callback)

Callback to execute when an user clicks any of the results.

Methods

close()

Hides results.

search()

Search and shows results.

timedSearch()

A slightly delayed call to search(). It is useful when an user stops typing.

Copyright © 2007-2009 Astrata Software.