• 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 provides a simple way to show search results using a search form. The form's action is an external script that will output search results in JSON format. The control will query for new results everytime the form is changed by the user, the results will be shown in an external div.

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

How to use

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

Meteora.uses('Meteora.Searchlist');

You'll need a div that will act as a container for the results of the Searchlist.

<div id="search_results"></div>

Also, you'll need to setup a form that will act as your search interface:

<form id="search_form">...(elements)...</form>

new Searchlist(
  // MAIN FORM
  'search_form',
  // OPTIONS
  {
    // CALLBACK
    // Action to perform when the user clicks on a result
    'onClick': function(data) {
      alert('data.index = '+data.index+', data.content = '+data.content+'');
   
    },
    // Search results
    'attachTo': 'search_results'
  }
);

Response example

{
  'AF':'Afghanistan',
  'AL':'Albania',
  'DZ':'Algeria',
  'AS':'American Samoa',
  'AD':'Andorra',
  'AO':'Angola'
}

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'
  )
);
</p>

Options

autoRequest: boolean

If false you'll need to call search() everytime you want the form to be submitted and new results to be displayed. The default value is true, it means that the form will be submitted everytime it changes.

autoRequestDelay: miliseconds

Time in miliseconds you want to wait before sending the form, useful when using text inputs and you want to wait for the user to stop typing.

attachTo: objectId

The id of the object you want the search results to be attached to.

Methods

search()

Sends the form, receives and displays responses.

Copyright © 2007-2009 Astrata Software.