js/autocomplete_part.js

   1 namespace('kivi', function(k){
   2   k.part_picker = function($real, options) {
   3     var o = $.extend({
   4       limit: 20,
   5       delay: 50,
   6     }, options);
   7     var STATES = {
   8       UNIQUE: 1,
   9       UNDEFINED: 0,
  10     }
  11     var real_id = $real.attr('id');
  12     var $dummy  = $('#' + real_id + '_name');
  13     var $type   = $('#' + real_id + '_type');
  14     var $column = $('#' + real_id + '_column');
  15     var state   = STATES.PICKED;
  16     var last_real = $real.val();
  17     var last_dummy = $dummy.val();
  18     var open_dialog = function(){
  19       open_jqm_window({
  20         url: 'controller.pl',
  21         data: {
  22           action: 'Part/part_picker_search',
  23           real_id: real_id,
  24           'filter.all:substr::ilike': function(){ return $dummy.val() },
  25           'filter.type':              function(){ return $type.val() },
  26           'column':                   function(){ return $column.val() },
  27         },
  28         id: 'part_selection',
  29       });
  30       return true;
  31     };
  32
  33     function ajax_data(term) {
  34       return {
  35         term:     term,
  36         type:     function() { return $type.val() },
  37         column:   function() { return $column.val()===undefined ? '' : $column.val() },
  38         current:  function() { return $real.val() },
  39         obsolete: 0,
  40       }
  41     }
  42
  43     function set_item (item) {
  44       if (item.id) {
  45         $real.val(item.id);
  46         // autocomplete ui has name, ajax items have description
  47         $dummy.val(item.name ? item.name : item.description);
  48       } else {
  49         $real.val('');
  50         $dummy.val('');
  51       }
  52       state = STATES.PICKED;
  53       last_real = $real.val();
  54       last_dummy = $dummy.val();
  55       $real.trigger('change');
  56     }
  57
  58     function make_defined_state () {
  59       if (state == STATES.PICKED)
  60         return true
  61       else if (state == STATES.UNDEFINED && $dummy.val() == '')
  62         set_item({})
  63       else
  64         set_item({ id: last_real, name: last_dummy })
  65     }
  66
  67     $dummy.autocomplete({
  68       source: function(req, rsp) {
  69         $.ajax($.extend(o, {
  70           url:      'controller.pl?action=Part/ajax_autocomplete',
  71           dataType: "json",
  72           data:     ajax_data(req.term),
  73           success:  function (data){ rsp(data) }
  74         }));
  75       },
  76       select: function(event, ui) {
  77         set_item(ui.item);
  78       },
  79     });
  80     /*  In case users are impatient and want to skip ahead:
  81      *  Capture <enter> key events and check if it's a unique hit.
  82      *  If it is, go ahead and assume it was selected. If it wasn't don't do
  83      *  anything so that autocompletion kicks in.  For <tab> don't prevent
  84      *  propagation. It would be nice to catch it, but javascript is too stupid
  85      *  to fire a tab event later on, so we'd have to reimplement the "find
  86      *  next active element in tabindex order and focus it".
  87      */
  88     $dummy.keypress(function(event){
  89       if (event.keyCode == 13 || event.keyCode == 9) { // enter or tab or tab
  90         // if string is empty assume they want to delete
  91         if ($dummy.val() == '') {
  92           set_item({});
  93           return true;
  94         } else if (state == STATES.PICKED) {
  95           return true;
  96         }
  97         $.ajax({
  98           url: 'controller.pl?action=Part/ajax_autocomplete',
  99           dataType: "json",
 100           data: ajax_data($dummy.val()),
 101           success: function (data){
 102             if (data.length == 1) {
 103               set_item(data[0]);
 104               if (event.keyCode == 13)
 105                 $('#update_button').click();
 106             } else {
 107              if (event.keyCode == 13)
 108                 open_dialog();
 109               else
 110                 make_defined_state();
 111             }
 112           }
 113         });
 114         if (event.keyCode == 13)
 115           return false;
 116       } else {
 117         state = STATES.UNDEFINED;
 118       }
 119     });
 120
 121 //    $dummy.blur(make_defined_state);  // blur triggers also on open_jqm_dialog
 122
 123     // now add a picker div after the original input
 124     var pcont  = $('<span>').addClass('position-absolute');
 125     var picker = $('<div>');
 126     $dummy.after(pcont);
 127     pcont.append(picker);
 128     picker.addClass('icon16 CRM--Schnellsuche').click(open_dialog);
 129   }
 130 });
 131
 132 $(function(){
 133   $('input.part_autocomplete').each(function(i,real){
 134     kivi.part_picker($(real));
 135   })
 136 });