From 42491b3e7e4bb33479865125c55d74de1c7ca4cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Verry?= Date: Wed, 18 Nov 2015 13:40:25 +0100 Subject: [PATCH 1/3] Enhancements for iPad * Disabling autocorrect * Adding keypress support --- src/jquery.tokeninput.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js index 4b69d823..da2d4373 100755 --- a/src/jquery.tokeninput.js +++ b/src/jquery.tokeninput.js @@ -248,7 +248,7 @@ var input_val; // Create a new text input an attach keyup events - var input_box = $("") + var input_box = $("") .css({ outline: "none" }) @@ -272,8 +272,8 @@ $(this).val(""); token_list.removeClass($(input).data("settings").classes.focused); }) - .bind("keyup keydown blur update", resize_input) - .keydown(function (event) { + .bind("keyup keydown keypress blur update", resize_input) + .on('keydown keypress', function (event) { var previous_token; var next_token; From a2342626a0ad2dcce50c8af7229fb69dce421e64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Verry?= Date: Tue, 24 Nov 2015 16:04:02 +0100 Subject: [PATCH 2/3] Improving keyboard management Improving keyboard management Issues : * On Safari iPad, the is not updated until keydown() has ended, despite setTimeout(), which causes do_search() to perform over the previous value of the field. * Keypress event returns "l" (lowercase "L", ASCII 108) as keyCode, which is then confused for KEY.NUMPAD_ENTER (keyCode 108). Fixes : * Updating the KEY array to the latest jQuery UI standard : https://github.com/jquery/jquery-ui/blob/e9643f6bfc922773e29e3084e64de0240b547f32/ui/core.js * Replacing event.keyCode by jQuery event.which : https://api.jquery.com/event.which/ * Dissociating keydown/keyup effects : http://www.quirksmode.org/dom/events/keys.html ** Keydown event is used to detect control keys (when the key is pressed, meaning that the effect of the key can be overloaded before it happens) ** Keyup event is used to act upon input changes (when the key is released, meaning that the effect of the key has already happened) ** Keypress event is not used anymore ** Now that do_search() performs only on keyup, the setTimeout() ("just long enough to let this function finish.") seems useless. * Removed stopPropagation(), preventDefault() when redundant with "return false" --- src/jquery.tokeninput.js | 49 ++++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js index da2d4373..1f9a7460 100755 --- a/src/jquery.tokeninput.js +++ b/src/jquery.tokeninput.js @@ -112,8 +112,9 @@ UP : 38, RIGHT : 39, DOWN : 40, - NUMPAD_ENTER : 108, - COMMA : 188 + DELETE : 46, + COMMA : 188, + PERIOD : 190 }; var HTML_ESCAPES = { @@ -272,12 +273,12 @@ $(this).val(""); token_list.removeClass($(input).data("settings").classes.focused); }) - .bind("keyup keydown keypress blur update", resize_input) - .on('keydown keypress', function (event) { + .bind("keyup keydown blur update", resize_input) + .keydown(function (event) { var previous_token; var next_token; - switch(event.keyCode) { + switch(event.which) { case KEY.LEFT: case KEY.RIGHT: case KEY.UP: @@ -289,22 +290,22 @@ if((previous_token.length && previous_token.get(0) === selected_token) || (next_token.length && next_token.get(0) === selected_token)) { // Check if there is a previous/next token and it is selected - if(event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) { + if(event.which === KEY.LEFT || event.which === KEY.UP) { deselect_token($(selected_token), POSITION.BEFORE); } else { deselect_token($(selected_token), POSITION.AFTER); } - } else if((event.keyCode === KEY.LEFT || event.keyCode === KEY.UP) && previous_token.length) { + } else if((event.which === KEY.LEFT || event.which === KEY.UP) && previous_token.length) { // We are moving left, select the previous token if it exists select_token($(previous_token.get(0))); - } else if((event.keyCode === KEY.RIGHT || event.keyCode === KEY.DOWN) && next_token.length) { + } else if((event.which === KEY.RIGHT || event.which === KEY.DOWN) && next_token.length) { // We are moving right, select the next token if it exists select_token($(next_token.get(0))); } } else { var dropdown_item = null; - if (event.keyCode === KEY.DOWN || event.keyCode === KEY.RIGHT) { + if (event.which === KEY.DOWN || event.which === KEY.RIGHT) { dropdown_item = $(dropdown).find('li').first(); if (selected_dropdown_item) { @@ -335,17 +336,11 @@ } return false; - } else if($(this).val().length === 1) { - hide_dropdown(); - } else { - // set a timeout just long enough to let this function finish. - setTimeout(function(){ do_search(); }, 5); } break; case KEY.TAB: case KEY.ENTER: - case KEY.NUMPAD_ENTER: case KEY.COMMA: if(selected_dropdown_item) { add_token($(selected_dropdown_item).data("tokeninput")); @@ -363,19 +358,33 @@ return true; } } - event.stopPropagation(); - event.preventDefault(); } return false; case KEY.ESCAPE: hide_dropdown(); return true; - + } + }) + .keyup(function (event) { + switch(event.which) { + case KEY.LEFT: + case KEY.RIGHT: + case KEY.UP: + case KEY.DOWN: + case KEY.TAB: + case KEY.ENTER: + case KEY.COMMA: + case KEY.ESCAPE: + break; + case KEY.BACKSPACE: + if (this.value.length > 0) { + do_search(); + } + break; default: if (String.fromCharCode(event.which)) { - // set a timeout just long enough to let this function finish. - setTimeout(function(){ do_search(); }, 5); + do_search(); } break; } From 0737a2f14a7087a78e15b2d0d4538e8ff2a53771 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Verry?= Date: Mon, 4 Jan 2016 15:12:57 +0100 Subject: [PATCH 3/3] Fix timing issues * When multiple ajax queries are sent, they might answer in the wrong order ; now the previous ajax query is aborted before the new one is executed * If backspace is hit, and the char length is reduced under minChars, the run_search() timeout is not cleared ; now it is cleared --- src/jquery.tokeninput.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/jquery.tokeninput.js b/src/jquery.tokeninput.js index 1f9a7460..3a3da8df 100755 --- a/src/jquery.tokeninput.js +++ b/src/jquery.tokeninput.js @@ -247,6 +247,7 @@ // Keep track of the timeout, old vals var timeout; var input_val; + var xhr; // Create a new text input an attach keyup events var input_box = $("") @@ -378,9 +379,7 @@ case KEY.ESCAPE: break; case KEY.BACKSPACE: - if (this.value.length > 0) { - do_search(); - } + do_search(); break; default: if (String.fromCharCode(event.which)) { @@ -958,7 +957,10 @@ // than $(input).data("settings").minChars function do_search() { var query = input_box.val(); - + if(xhr) { + xhr.abort(); + } + clearTimeout(timeout); if(query && query.length) { if(selected_token) { deselect_token($(selected_token), POSITION.AFTER); @@ -966,8 +968,6 @@ if(query.length >= $(input).data("settings").minChars) { show_dropdown_searching(); - clearTimeout(timeout); - timeout = setTimeout(function(){ run_search(query); }, $(input).data("settings").searchDelay); @@ -1047,7 +1047,7 @@ } // Make the request - $.ajax(ajax_params); + xhr = $.ajax(ajax_params); } else if($(input).data("settings").local_data) { // Do the search through local data var results = $.grep($(input).data("settings").local_data, function (row) {