-
Notifications
You must be signed in to change notification settings - Fork 722
/
jquery.keyboard.extension-autocomplete.js
147 lines (138 loc) · 4.4 KB
/
jquery.keyboard.extension-autocomplete.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/*
* jQuery UI Virtual Keyboard Autocomplete v1.2 for Keyboard v1.8+ only
*
* By Rob Garrison (aka Mottie & Fudgey)
* Licensed under the MIT License
*
* Use this extension with the Virtual Keyboard to get
* the jQuery UI Autocomplete widget to work seamlessly
*
* Requires:
* jQuery
* jQuery UI & css
* Keyboard plugin : https://github.com/Mottie/Keyboard
*
* Setup:
* $('.ui-keyboard-input')
* .keyboard(options)
* .autocomplete(options)
* .addAutoComplete();
*
* // or if targeting a specific keyboard
* $('#keyboard1')
* .keyboard(options) // keyboard plugin
* .autocomplete(options) // jQuery UI autocomplete
* .addAutoComplete(); // this keyboard extension
*
*/
(function($){
$.fn.addAutocomplete = function(){
return this.each(function(){
// make sure a keyboard is attached
var base = $(this).data('keyboard');
if (!base) { return; }
// Setup
base.autocomplete_init = function(txt, delay, accept){
// visible event is fired before this extension is initialized, so check!
if (base.options.alwaysOpen && base.isVisible) {
base.autocomplete_setup();
}
base.$el
.bind('visible.keyboard',function(){
base.autocomplete_setup();
})
.bind('change.keyboard',function(e){
if (base.hasAutocomplete && base.isVisible) {
base.$el
.val(base.$preview.val())
.trigger('keydown.autocomplete');
}
})
.bind('hidden.keyboard', function(e){
base.$el.autocomplete('close');
})
.bind('autocompleteopen', function(e, ui) {
if (base.hasAutocomplete){
// reposition autocomplete window next to the keyboard
base.$el.data('autocomplete').menu.element.position({
of : base.$keyboard,
my : 'right top',
at : 'left top',
collision: 'flip'
});
}
})
.bind('autocompleteselect', function(e,ui){
if (base.hasAutocomplete && ui.item.value !== ''){
base.$preview
.val( ui.item.value )
.focus();
}
});
};
// set up after keyboard is visible
base.autocomplete_setup = function(){
// look for autocomplete
base.$autocomplete = base.$el.data('autocomplete');
base.hasAutocomplete = (typeof(base.$autocomplete) === 'undefined') ? false : (base.$autocomplete.options.disabled) ? false : true;
// only bind to keydown once
if (base.hasAutocomplete && !base.autocomplete_bind) {
base.$preview.bind('keydown.keyboard',function(e){
// send keys to the autocomplete widget (arrow, pageup/down, etc)
base.autocomplete_input(e);
});
base.autocomplete_bind = true;
}
};
// Navigate and select inside autocomplete popup
base.autocomplete_input = function(event){
// copied from jquery ui autocomplete code to include autocomplete navigation
// there might be a better workaround
var t, keyCode = $.ui.keyCode;
switch( event.keyCode ) {
case keyCode.PAGE_UP:
base.$autocomplete._move( "previousPage", event );
break;
case keyCode.PAGE_DOWN:
base.$autocomplete._move( "nextPage", event );
break;
case keyCode.UP:
base.$autocomplete._move( "previous", event );
// prevent moving cursor to beginning of text field in some browsers
event.preventDefault();
break;
case keyCode.DOWN:
base.$autocomplete._move( "next", event );
// prevent moving cursor to end of text field in some browsers
event.preventDefault();
break;
case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:
t = base.$autocomplete.menu.element.find('#ui-active-menuitem').text() || '';
if (t !== '') { base.$preview.val(t); }
break;
default:
// keypress is triggered before the input value is changed
clearTimeout( base.$autocomplete.searching );
base.$autocomplete.searching = setTimeout(function() {
// only search if the value has changed
if ( base.$autocomplete.term != base.$autocomplete.element.val() ) {
base.$autocomplete.selectedItem = null;
base.$autocomplete.search( null, event );
}
}, base.$autocomplete.options.delay );
break;
}
};
// replace original function with this one
base.escClose = function(e){
// prevent selecting an item in autocomplete from closing keyboard
if (base.hasAutocomplete && e.target.id === 'ui-active-menuitem') { return; }
if ( !$(e.target).closest('.ui-keyboard').length ) {
base.close( (base.options.autoAccept) ? true : false );
}
};
base.autocomplete_init();
});
};
})(jQuery);