=head1 NAME

Package WebGUI::Macro::MLajax

=head1 DESCRIPTION

Operation for executing SQL select-type statements and returning e.g. JSON formatted output for
generating autocompleted forms

=head2  www_ajaxinput

=head3 SQL

In this version an SQL statement depends on input params:
     tab, fld, fmt and term

These are combined to:
      "select $fld from $tab where $fld like '%$term%' ";

term is build by using jQuery and activating or changing the form field

=head3 format

Describes how to format the results of the SQL statement.
      'array' delivers a JSONed array refence
      'hash'  delevers a JSON of an ArrayRefOfHashRefs

=head3 Minimum Url

The Url send by an input form as example:
       ?op=ajaxinput&tab=assetData&fld=title&term=abc

=head2 Example use

Build a SQLReport.

Filling-in the form, sends ajax-requests to the server and actualises the input-field.

=head3  Description in SQL-Report:

<form method="post">
  <fieldset>
     <legend>WebGUI Autocomplete Example</legend>
     <p>Start typing the name of a WebGUI asset</p>
     <p class="aj-widget">
        <label for="searchfield">Asset-Title</label>
        <input id="searchfield" name="searchfield" type="text" /></p>
     <input id="searchfield_id" name="searchfield_id" type="hidden" />
     <p><input name="submit" value="Submit" type="submit" /></p>
  </fieldset>
</form>

=head3 SQL in SQLReport

Select distinct title, url from assetData where title like '%^FormParam(searchfield);%' order by title

=head3 Metadata in SQLReport

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type='text/javascript'>
$(function() {
   $("#searchfield").autocomplete({
    source: "?op=ajaxinput&tab=assetData&fld=title",
    minLength: 2,
    select: function(event, ui) {
            $('#searchfield_id').val(ui.item.id);
    }
   });
});

</script>

=head2 INSTALL

Put this op in your WebGUI/Operation directory and activete it by putting
"ajaxinput" => "MLajax",
in Operation.pm (getOperations)

Use Firebug (Network) to test, what happens


=cut