kivitendo/js/autocomplete_part.js @ 9aaadfdc
| 854fa965 | Sven Schöling | namespace('kivi', function(k){
|
||
| 5cec90ad | Sven Schöling | k.PartPickerCache = { }
|
||
k.PartPicker = function($real, options) {
|
||||
| 681ec24c | Sven Schöling | var o = $.extend({
|
||
| 2504ebe1 | Sven Schöling | limit: 20,
|
||
delay: 50,
|
||||
| 854fa965 | Sven Schöling | }, options);
|
||
| 681ec24c | Sven Schöling | var STATES = {
|
||
UNIQUE: 1,
|
||||
UNDEFINED: 0,
|
||||
}
|
||||
| 854fa965 | Sven Schöling | var real_id = $real.attr('id');
|
||
var $dummy = $('#' + real_id + '_name');
|
||||
var $type = $('#' + real_id + '_type');
|
||||
var $column = $('#' + real_id + '_column');
|
||||
| 681ec24c | Sven Schöling | var state = STATES.PICKED;
|
||
var last_real = $real.val();
|
||||
var last_dummy = $dummy.val();
|
||||
| a8617d4c | Sven Schöling | var open_dialog = function(){
|
||
open_jqm_window({
|
||||
url: 'controller.pl',
|
||||
data: {
|
||||
action: 'Part/part_picker_search',
|
||||
| 854fa965 | Sven Schöling | real_id: real_id,
|
||
| a8617d4c | Sven Schöling | 'filter.all:substr::ilike': function(){ return $dummy.val() },
|
||
| 854fa965 | Sven Schöling | 'filter.type': function(){ return $type.val() },
|
||
'column': function(){ return $column.val() },
|
||||
| a8617d4c | Sven Schöling | },
|
||
id: 'part_selection',
|
||||
});
|
||||
return true;
|
||||
};
|
||||
| 854fa965 | Sven Schöling | |||
| 681ec24c | Sven Schöling | function ajax_data(term) {
|
||
| 854fa965 | Sven Schöling | return {
|
||
term: term,
|
||||
type: function() { return $type.val() },
|
||||
column: function() { return $column.val()===undefined ? '' : $column.val() },
|
||||
current: function() { return $real.val() },
|
||||
obsolete: 0,
|
||||
}
|
||||
}
|
||||
| 681ec24c | Sven Schöling | function set_item (item) {
|
||
| 854fa965 | Sven Schöling | if (item.id) {
|
||
$real.val(item.id);
|
||||
// autocomplete ui has name, ajax items have description
|
||||
$dummy.val(item.name ? item.name : item.description);
|
||||
} else {
|
||||
$real.val('');
|
||||
$dummy.val('');
|
||||
}
|
||||
| 681ec24c | Sven Schöling | state = STATES.PICKED;
|
||
last_real = $real.val();
|
||||
last_dummy = $dummy.val();
|
||||
| c3b2d659 | Sven Schöling | $real.trigger('change');
|
||
| 681ec24c | Sven Schöling | }
|
||
function make_defined_state () {
|
||||
if (state == STATES.PICKED)
|
||||
return true
|
||||
else if (state == STATES.UNDEFINED && $dummy.val() == '')
|
||||
set_item({})
|
||||
else
|
||||
set_item({ id: last_real, name: last_dummy })
|
||||
| 854fa965 | Sven Schöling | }
|
||
| 5cec90ad | Sven Schöling | function update_results () {
|
||
$.ajax({
|
||||
url: 'controller.pl?action=Part/part_picker_result',
|
||||
data: {
|
||||
'filter.all:substr::ilike': function(){ var val = $('#part_picker_filter').val(); return val === undefined ? '' : val },
|
||||
'filter.type': $type.val(),
|
||||
'column': $column.val(),
|
||||
'real_id': $real.val,
|
||||
},
|
||||
success: function(data){ $('#part_picker_result').html(data) }
|
||||
});
|
||||
};
|
||||
| c2d1e374 | Sven Schöling | function close_popup() {
|
||
$('#part_selection').jqmClose()
|
||||
};
|
||||
| 854fa965 | Sven Schöling | $dummy.autocomplete({
|
||
source: function(req, rsp) {
|
||||
$.ajax($.extend(o, {
|
||||
url: 'controller.pl?action=Part/ajax_autocomplete',
|
||||
dataType: "json",
|
||||
data: ajax_data(req.term),
|
||||
success: function (data){ rsp(data) }
|
||||
}));
|
||||
},
|
||||
select: function(event, ui) {
|
||||
set_item(ui.item);
|
||||
},
|
||||
});
|
||||
| 2504ebe1 | Sven Schöling | /* In case users are impatient and want to skip ahead:
|
||
* Capture <enter> key events and check if it's a unique hit.
|
||||
* If it is, go ahead and assume it was selected. If it wasn't don't do
|
||||
* anything so that autocompletion kicks in. For <tab> don't prevent
|
||||
* propagation. It would be nice to catch it, but javascript is too stupid
|
||||
* to fire a tab event later on, so we'd have to reimplement the "find
|
||||
* next active element in tabindex order and focus it".
|
||||
*/
|
||||
$dummy.keypress(function(event){
|
||||
if (event.keyCode == 13 || event.keyCode == 9) { // enter or tab or tab
|
||||
| 854fa965 | Sven Schöling | // if string is empty assume they want to delete
|
||
| 2504ebe1 | Sven Schöling | if ($dummy.val() == '') {
|
||
| 854fa965 | Sven Schöling | set_item({});
|
||
| 2504ebe1 | Sven Schöling | return true;
|
||
| 681ec24c | Sven Schöling | } else if (state == STATES.PICKED) {
|
||
return true;
|
||||
| 2504ebe1 | Sven Schöling | }
|
||
$.ajax({
|
||||
url: 'controller.pl?action=Part/ajax_autocomplete',
|
||||
dataType: "json",
|
||||
| eff6af28 | Sven Schöling | data: $.extend( ajax_data($dummy.val()), { prefer_exact: 1 } ),
|
||
| 2504ebe1 | Sven Schöling | success: function (data){
|
||
if (data.length == 1) {
|
||||
| 854fa965 | Sven Schöling | set_item(data[0]);
|
||
| 2504ebe1 | Sven Schöling | if (event.keyCode == 13)
|
||
$('#update_button').click();
|
||||
| 3cacc231 | Sven Schöling | } else if (data.length > 1) {
|
||
| 681ec24c | Sven Schöling | if (event.keyCode == 13)
|
||
| 854fa965 | Sven Schöling | open_dialog();
|
||
else
|
||||
| 681ec24c | Sven Schöling | make_defined_state();
|
||
| 3cacc231 | Sven Schöling | } else {
|
||
if (event.keyCode == 9)
|
||||
make_defined_state();
|
||||
| 2504ebe1 | Sven Schöling | }
|
||
}
|
||||
});
|
||||
if (event.keyCode == 13)
|
||||
return false;
|
||||
| 681ec24c | Sven Schöling | } else {
|
||
state = STATES.UNDEFINED;
|
||||
}
|
||||
| 2504ebe1 | Sven Schöling | });
|
||
| 681ec24c | Sven Schöling | // $dummy.blur(make_defined_state); // blur triggers also on open_jqm_dialog
|
||
| 2504ebe1 | Sven Schöling | |||
// now add a picker div after the original input
|
||||
var pcont = $('<span>').addClass('position-absolute');
|
||||
var picker = $('<div>');
|
||||
$dummy.after(pcont);
|
||||
pcont.append(picker);
|
||||
| a8617d4c | Sven Schöling | picker.addClass('icon16 CRM--Schnellsuche').click(open_dialog);
|
||
| 5cec90ad | Sven Schöling | |||
return {
|
||||
| c2d1e374 | Sven Schöling | real: function() { return $real },
|
||
dummy: function() { return $dummy },
|
||||
type: function() { return $type },
|
||||
column: function() { return $column },
|
||||
| 5cec90ad | Sven Schöling | update_results: update_results,
|
||
| c2d1e374 | Sven Schöling | set_item: set_item,
|
||
reset: make_defined_state,
|
||||
init_results: function () {
|
||||
$('div.part_picker_part').each(function(){
|
||||
$(this).click(function(){
|
||||
set_item({
|
||||
name: $(this).children('input.part_picker_description').val(),
|
||||
id: $(this).children('input.part_picker_id').val(),
|
||||
});
|
||||
close_popup();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
$('#part_selection').keypress(function(e){
|
||||
if (e.keyCode == 27) { // escape
|
||||
close_popup();
|
||||
$dummy.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
| 5cec90ad | Sven Schöling | }
|
||
| 854fa965 | Sven Schöling | }
|
||
});
|
||||
$(function(){
|
||||
$('input.part_autocomplete').each(function(i,real){
|
||||
| 5cec90ad | Sven Schöling | kivi.PartPickerCache[real.id] = new kivi.PartPicker($(real));
|
||
| 854fa965 | Sven Schöling | })
|
||
});
|