js/autocomplete_part.js

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