Skip to content
This repository was archived by the owner on Sep 10, 2023. It is now read-only.

Commit 1102678

Browse files
hugohenriquehugohenrique
committed
add functionality autoSelectFirstResult
fix CodeStandard (CS) removed using the $ function. jquery type to native function typeof
1 parent a299ad6 commit 1102678

File tree

1 file changed

+85
-74
lines changed

1 file changed

+85
-74
lines changed

‎src/jquery.tokeninput.js

Lines changed: 85 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
* choose which one suits your project best!
88
*
99
*/
10+
;(function ($) {
1011

11-
(function ($) {
12-
// Default settings
13-
var DEFAULT_SETTINGS = {
12+
// Default settings
13+
var DEFAULT_SETTINGS = {
1414
// Search settings
1515
method: "GET",
1616
queryParam: "q",
@@ -58,6 +58,7 @@ var DEFAULT_SETTINGS = {
5858
// Behavioral settings
5959
allowFreeTagging: false,
6060
allowTabOut: false,
61+
autoSelectFirstResult: false,
6162

6263
// Callbacks
6364
onResult: null,
@@ -72,10 +73,10 @@ var DEFAULT_SETTINGS = {
7273

7374
// Keep track if the input is currently in disabled mode
7475
disabled: false
75-
};
76+
};
7677

77-
// Default classes to use when theming
78-
var DEFAULT_CLASSES = {
78+
// Default classes to use when theming
79+
var DEFAULT_CLASSES = {
7980
tokenList: "token-input-list",
8081
token: "token-input-token",
8182
tokenReadOnly: "token-input-token-readonly",
@@ -89,17 +90,17 @@ var DEFAULT_CLASSES = {
8990
inputToken: "token-input-input-token",
9091
focused: "token-input-focused",
9192
disabled: "token-input-disabled"
92-
};
93+
};
9394

94-
// Input box position "enum"
95-
var POSITION = {
95+
// Input box position "enum"
96+
var POSITION = {
9697
BEFORE: 0,
9798
AFTER: 1,
9899
END: 2
99-
};
100+
};
100101

101-
// Keys "enum"
102-
var KEY = {
102+
// Keys "enum"
103+
var KEY = {
103104
BACKSPACE: 8,
104105
TAB: 9,
105106
ENTER: 13,
@@ -115,18 +116,18 @@ var KEY = {
115116
DOWN: 40,
116117
NUMPAD_ENTER: 108,
117118
COMMA: 188
118-
};
119+
};
119120

120-
var HTML_ESCAPES = {
121-
'&': '&',
122-
'<': '&lt;',
123-
'>': '&gt;',
124-
'"': '&quot;',
125-
"'": '&#x27;',
126-
'/': '&#x2F;'
127-
};
121+
var HTML_ESCAPES = {
122+
'&': '&amp;',
123+
'<': '&lt;',
124+
'>': '&gt;',
125+
'"': '&quot;',
126+
"'": '&#x27;',
127+
'/': '&#x2F;'
128+
};
128129

129-
var HTML_ESCAPE_CHARS = /[&<>"'\/]/g;
130+
var HTML_ESCAPE_CHARS = /[&<>"'\/]/g;
130131

131132
function coerceToString(val) {
132133
return String((val === null || val === undefined) ? '' : val);
@@ -201,7 +202,7 @@ $.TokenList = function (input, url_or_data, settings) {
201202
//
202203

203204
// Configure the data source
204-
if($.type(url_or_data) === "string" || $.type(url_or_data) === "function") {
205+
if(typeof(url_or_data) === "string" || typeof(url_or_data) === "function") {
205206
// Set the url to query against
206207
$(input).data("settings").url = url_or_data;
207208

@@ -235,7 +236,6 @@ $.TokenList = function (input, url_or_data, settings) {
235236
$(input).data("settings").classes = DEFAULT_CLASSES;
236237
}
237238

238-
239239
// Save the tokens
240240
var saved_tokens = [];
241241

@@ -250,7 +250,7 @@ $.TokenList = function (input, url_or_data, settings) {
250250
var input_val;
251251

252252
// Create a new text input an attach keyup events
253-
var input_box = $("<input type=\"text\" autocomplete=\"off\" autocapitalize=\"off\"/>")
253+
var input_box = $("<input type=\"text\" autocomplete=\"off\" autocapitalize=\"off\"/>")
254254
.css({
255255
outline: "none"
256256
})
@@ -284,39 +284,46 @@ $.TokenList = function (input, url_or_data, settings) {
284284
case KEY.RIGHT:
285285
case KEY.UP:
286286
case KEY.DOWN:
287-
if(!$(this).val()) {
288-
previous_token = input_token.prev();
289-
next_token = input_token.next();
290-
291-
if((previous_token.length && previous_token.get(0) === selected_token) || (next_token.length && next_token.get(0) === selected_token)) {
292-
// Check if there is a previous/next token and it is selected
293-
if(event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) {
294-
deselect_token($(selected_token), POSITION.BEFORE);
295-
} else {
296-
deselect_token($(selected_token), POSITION.AFTER);
297-
}
298-
} else if((event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) && previous_token.length) {
299-
// We are moving left, select the previous token if it exists
300-
select_token($(previous_token.get(0)));
301-
} else if((event.keyCode === KEY.RIGHT || event.keyCode === KEY.DOWN) && next_token.length) {
302-
// We are moving right, select the next token if it exists
303-
select_token($(next_token.get(0)));
304-
}
305-
} else {
306-
var dropdown_item = null;
287+
if(this.value.length === 0) {
288+
previous_token = input_token.prev();
289+
next_token = input_token.next();
290+
291+
if((previous_token.length && previous_token.get(0) === selected_token) || (next_token.length && next_token.get(0) === selected_token)) {
292+
// Check if there is a previous/next token and it is selected
293+
if(event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) {
294+
deselect_token($(selected_token), POSITION.BEFORE);
295+
} else {
296+
deselect_token($(selected_token), POSITION.AFTER);
297+
}
298+
} else if((event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) && previous_token.length) {
299+
// We are moving left, select the previous token if it exists
300+
select_token($(previous_token.get(0)));
301+
} else if((event.keyCode === KEY.RIGHT || event.keyCode === KEY.DOWN) && next_token.length) {
302+
// We are moving right, select the next token if it exists
303+
select_token($(next_token.get(0)));
304+
}
305+
} else {
306+
var dropdown_item = null;
307307

308-
if(event.keyCode === KEY.DOWN || event.keyCode === KEY.RIGHT) {
309-
dropdown_item = $(selected_dropdown_item).next();
310-
} else {
311-
dropdown_item = $(selected_dropdown_item).prev();
312-
}
308+
if (event.keyCode === KEY.DOWN || event.keyCode === KEY.RIGHT) {
309+
dropdown_item = $(dropdown).find('li').first();
313310

314-
if(dropdown_item.length) {
315-
select_dropdown_item(dropdown_item);
316-
}
311+
if (selected_dropdown_item) {
312+
dropdown_item = $(selected_dropdown_item).next();
313+
}
314+
} else {
315+
dropdown_item = $(dropdown).find('li').last();
316+
317+
if (selected_dropdown_item) {
318+
dropdown_item = $(selected_dropdown_item).prev();
319+
}
317320
}
318-
return false;
319-
break;
321+
322+
select_dropdown_item(dropdown_item);
323+
}
324+
325+
return false;
326+
break;
320327

321328
case KEY.BACKSPACE:
322329
previous_token = input_token.prev();
@@ -377,21 +384,24 @@ $.TokenList = function (input, url_or_data, settings) {
377384
});
378385

379386
// Keep reference for placeholder
380-
if (settings.placeholder)
381-
input_box.attr("placeholder", settings.placeholder)
387+
if (settings.placeholder) {
388+
input_box.attr("placeholder", settings.placeholder);
389+
}
382390

383391
// Keep a reference to the original input box
384392
var hidden_input = $(input)
385-
.hide()
386-
.val("")
387-
.focus(function () {
388-
focus_with_timeout(input_box);
389-
})
390-
.blur(function () {
391-
input_box.blur();
392-
//return the object to this can be referenced in the callback functions.
393-
return hidden_input;
394-
});
393+
.hide()
394+
.val("")
395+
.focus(function () {
396+
focus_with_timeout(input_box);
397+
})
398+
.blur(function () {
399+
input_box.blur();
400+
401+
//return the object to this can be referenced in the callback functions.
402+
return hidden_input;
403+
})
404+
;
395405

396406
// Keep a reference to the selected token and dropdown item
397407
var selected_token = null;
@@ -459,10 +469,12 @@ $.TokenList = function (input, url_or_data, settings) {
459469
// Pre-populate list if items exist
460470
hidden_input.val("");
461471
var li_data = $(input).data("settings").prePopulate || hidden_input.data("pre");
462-
if($(input).data("settings").processPrePopulate && $.isFunction($(input).data("settings").onResult)) {
472+
473+
if ($(input).data("settings").processPrePopulate && $.isFunction($(input).data("settings").onResult)) {
463474
li_data = $(input).data("settings").onResult.call(hidden_input, li_data);
464475
}
465-
if(li_data && li_data.length) {
476+
477+
if (li_data && li_data.length) {
466478
$.each(li_data, function (index, value) {
467479
insert_token(value);
468480
checkTokenLimit();
@@ -476,8 +488,8 @@ $.TokenList = function (input, url_or_data, settings) {
476488
}
477489

478490
// Initialization is done
479-
if($.isFunction($(input).data("settings").onReady)) {
480-
$(input).data("settings").onReady.call();
491+
if ($(input).data("settings").onReady === "function") {
492+
$(input).data("settings").onReady.call();
481493
}
482494

483495
//
@@ -894,7 +906,6 @@ $.TokenList = function (input, url_or_data, settings) {
894906
var this_li = $(input).data("settings").resultsFormatter(value);
895907

896908
this_li = find_value_and_highlight_term(this_li ,value[$(input).data("settings").propertyToSearch], query);
897-
898909
this_li = $(this_li).appendTo(dropdown_ul);
899910

900911
if(index % 2) {
@@ -903,7 +914,7 @@ $.TokenList = function (input, url_or_data, settings) {
903914
this_li.addClass($(input).data("settings").classes.dropdownItem2);
904915
}
905916

906-
if(index === 0) {
917+
if(index === 0 && $(input).data("settings").autoSelectFirstResult) {
907918
select_dropdown_item(this_li);
908919
}
909920

@@ -1102,5 +1113,5 @@ $.TokenList.Cache = function (options) {
11021113
return data[query];
11031114
};
11041115
};
1105-
}(jQuery));
11061116

1117+
}(jQuery));

0 commit comments

Comments
 (0)