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/autocomlete', [
   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 field
  18    column   : specifies the column that is represented by the bound field. typically description or name.
  19
  20   TODO FIELDS:
  21    - addition fields like type, vc etc.
  22    - additional dependencies, see jquery.autocomplete documentation
  23    - hook function on select, again see jquery documentation
  24
  25   a simple SPEC would look like this:
  26
  27    { selector => '#description', column => 'description' }
  28      # field with id="description" should be autocompleted with descriptions
  29
  30    { script => 'ic.pl', selector => '[name^="partnumber_"]', column => 'partnumber' }
  31      # let ic.pl autocomplete by partnumbers, bind this to all fields where the name begins with "partnumber_"
  32
  33
  34
  35     The Backend Side
  36
  37   The called function will recieve the queried string as hashkey "q" in form, as well as every other param specified here.
  38   It should generate a generic ajax header (see form), followed by newline separated list of possible completion values.
  39
  40 %]
  41 <script type='text/javascript'>
  42 [%- FOREACH token = AUTOCOMPLETES %]
  43 [%- DEFAULT token.script         = script              %]
  44 [%- DEFAULT token.action         = 'ajax_autocomplete' %]
  45 [%- DEFAULT token.INPUT_ENCODING = 'utf8'              %]
  46 [%- token.url = token.script
  47               _ '?action=' _ token.action
  48               _ '&INPUT_ENCODING=' _ token.INPUT_ENCODING %]
  49 [%- SET token.url = token.url _ '&column=' _ token.column IF token.column %]
  50 $(document).ready( $('[% token.selector %]').autocomplete('[% token.url %]'));
  51 [%- END %]
  52 </script>