templates/webpages/generic/autocomplete.html

   1 [%#-
   2      Autocompletion
   3
   4   This template enables auto completion for input fields.
   5   Calling Syntax is:
   6
   7     INCLUDE 'generic/autocomplete', [
   8       { SPEC_1 },
   9       { SPEC_2 },
  10       ...
  11     ]
  12
  13   where SPEC is a hash containing the following keys:
  14
  15    script   : the script that is called for autocompletion, defaults to the invoking script
  16    action   : action in the ajax script, defaults to 'ajax_autocomplete'
  17    selector : a jquery selector, specifying the input fields
  18    column   : specifies the column that is represented by the bound field. typically description or name.
  19    params   : additional params that should be included in the request, like customer/vendor information. expects a hash.
  20
  21   TODO FIELDS:
  22    - addition fields like type, vc etc.
  23    - additional dependencies, see jquery.autocomplete documentation
  24    - hook function on select, again see jquery documentation
  25    - limit: maximum number of results shown.
  26
  27   a simple SPEC would look like this:
  28
  29    { selector => '#description', column => 'description' }
  30      # field with id="description" should be autocompleted with descriptions
  31
  32    { script => 'ic.pl', selector => '[name^="partnumber_"]', column => 'partnumber' }
  33      # let ic.pl autocomplete by partnumbers, bind this to all fields where the name begins with "partnumber_"
  34
  35
  36
  37     The Backend Side
  38
  39   The called function will recieve the queried string as hashkey "q" in form, as well as every other param specified here.
  40   It should generate a generic ajax header (see form), followed by newline separated list of possible completion values.
  41
  42 %]
  43 <script type='text/javascript'>
  44 [%- FOREACH token = AUTOCOMPLETES %]
  45 [%- DEFAULT token.script         = script              %]
  46 [%- DEFAULT token.action         = 'ajax_autocomplete' %]
  47 [%- DEFAULT token.INPUT_ENCODING = 'utf8'              %]
  48 [%- FOREACH key = token.params.keys %]
  49 [%- token.additional_url = token.additional_url _ '&' _ key _ '=' _ token.params.$key %]
  50 [%- END %]
  51 [%- token.url = token.script
  52               _ '?action=' _ token.action
  53               _ '&INPUT_ENCODING=' _ token.INPUT_ENCODING %]
  54 [%- SET token.url = token.url _ '&column=' _ token.column IF token.column %]
  55 [%- SET token.url = token.url _ token.additional_url IF token.additional_url %]
  56 $(document).ready( $('[% token.selector %]').autocomplete('[% token.url %]'));
  57 [%- END %]
  58 </script>