Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Allow custom entry and avoid parallel ajax calls #291

Open
wants to merge 19 commits into from
@traceoutdoor

For Tom's Guide and Tom's Hardware specific behaviour, we added a new option that allows custom entries that are not in suggested list.

By default this option is set to false.

When allowCustomEntry setting is true:
- type comma allows to add a token that isn't suggested in token list
- and when no token is selected, type enter or tab adds current token

By the way, in order to improve performances and avoid waiting for ajax calls timeout when webservice is too slow, we abort previous running search before launching new one.

Init example

$('#inputTokenId').tokenInput('/my/url/', {'allowCustomEntry' : true});

Demo

http://www.tomsguide.fr/solutions/nouveau_sujet.htm (on tag input)

@kamranayub

I pulled this into my fork

@9mm

this is exactly what I was looking for

@muscardinus

Thanks for this.

I pulled this into my fork and made a small fix to prevent empty tokens from being created.

@coorasse

Thanks!
Pulled in my fork too.

@earnshaw

This is great, however when you press comma it will add ONE, and only one new entry that doesn't exist in list. Is there something I'm missing? not doing right?, as it seems to work on your website OK- http://www.tomsguide.fr/solutions/nouveau_sujet.htm. On that page you can add as many tags as you want that are new.

@9mm
9mm commented

@earnshaw the same thing happened to me. try this: https://github.com/kusmierz/jquery-tokeninput

@earnshaw

@ecefx - you are an absolute legend! Thank you very much for letting me know about that. Made my day!

@pbadger

This is sweet! Thanks so much!

@brandonblack

This is absolutely epic and thanks a bunch for adding it. However, it should probably be modified to ignore empty strings. Right now in the demo if you type space + comma or space + enter it will result an an empty token being added to the list.

lgiraudel and others added some commits
@rupal-pinge

In my code, I have used tokenInput for 4 consecutive text boxes. I have used the token-input.js in https://github.com/kusmierz/jquery-tokeninput

I wish to add a new token when the custom text is pasted using (ctr+v) or by mouse right click and paste. I have added the following code:

$(".container").live("paste", ".token-input-input-token input", function(){
setTimeout(function () {
if ( $('.token-input-input-token input').val() != '') {
newToken = {'id':$('.token-input-input-token input').val(),'name':$('.token-input-input-token input').val()};
add_token(newToken);
return false;
}
else
{

return false;

}
}, 100);

});
The code is working fine for the first text box while for other 3 text boxes new token is not created on paste event.

Could you help me to fix the issue?

@ace-n ace-n referenced this pull request in acm-uiuc/liquid
Open

Quote DB-Problems submitting quote #154

@rahul100885

will it be great if it works with prevent duplicate with case sensitive or insensitive

@emir

Edit: Fixed on this commit: emir/jquery-tokeninput@ae178c4

when I use like below, I got "undefined", do you have any ideas?

$(".skills").tokenInput("/api/v1/skills/find", {
        propertyToSearch: "title",
        theme: "facebook",
        allowCustomEntry : true,
        highlightDuplicates : false,
    });

tokeninput

emir and others added some commits
@emir emir fixed hardcoded object on addCurrentTokenInputValue function then add…
…ed propertyToSearch on it
ae178c4
@lgiraudel lgiraudel Merge pull request #3 from emir/master
fixed hardcoded object on addCurrentTokenInputValue function then added ...
6c269ae
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 12, 2012
  1. Allow custom entry that are not in suggested list to be tokennized.

    Jonathan authored
    Need to set parameter allowCustomEntry to true.
  2. When custom entry is enabled, comma key pressed always add current in…

    Jonathan authored
    …put value.
    
    Enter or Tab key pressed add first selected token and current input value when there is no entry selected.
  3. @traceoutdoor

    Update README.md

    traceoutdoor authored
Commits on Mar 13, 2012
  1. @traceoutdoor

    Update README.md

    traceoutdoor authored
  2. @traceoutdoor

    Update README.md

    traceoutdoor authored
Commits on Mar 14, 2012
  1. @cyrusstoller
  2. @cyrusstoller

    Preventing duplicates based on the token values that are going to be …

    cyrusstoller authored
    …submitted, which may not be ids if you have custom entries
Commits on Mar 15, 2012
  1. @marcnazarian

    Merge pull request #1 from cyrusstoller/preventDuplicate

    marcnazarian authored
    Prevent duplicate custom entries based on tokenValue
  2. @marcnazarian

    Update README.md

    marcnazarian authored
Commits on Oct 17, 2012
  1. Missing semi-colon

    lgiraudel authored
  2. @traceoutdoor

    Merge pull request #2 from lgiraudel/master

    traceoutdoor authored
    To compress file without errors
  3. Missing many semicolons

    lgiraudel authored
Commits on Nov 14, 2012
  1. Removing useless semi-colons

    lgiraudel authored
Commits on Jul 22, 2014
  1. @emir

    fixed hardcoded object on addCurrentTokenInputValue function then add…

    emir authored
    …ed propertyToSearch on it
  2. @lgiraudel

    Merge pull request #3 from emir/master

    lgiraudel authored
    fixed hardcoded object on addCurrentTokenInputValue function then added ...
This page is out of date. Refresh to see the latest.
Showing with 75 additions and 20 deletions.
  1. +21 −0 README.md
  2. +54 −20 src/jquery.tokeninput.js
View
21 README.md
@@ -5,6 +5,27 @@ Overview
--------
Tokeninput is a jQuery plugin which allows your users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.
+Features added by TomsLabs
+-------------------------
+
+ - Allow custom entry :
+ * when allowCustomEntry setting is true, type comma allows to add a token that isn't suggested in token list
+ * when allowCustomEntry setting is true and no token is selected, type enter or tab adds current token
+
+ - Avoid parallel search request in order to optimize performance
+
+ - Make highlight duplicate switchable (with highlightDuplicates, default to true)
+
+Init example
+------------
+ $('#inputTokenId').tokenInput('/my/url/', {'allowCustomEntry' : true, 'highlightDuplicates' : false});
+
+
+Demo
+-----
+http://www.tomsguide.fr/solutions/nouveau_sujet.htm (on tag input)
+
+
Documentation, Features and Demos
---------------------------------
Full details and documentation can be found on the project page here:
View
74 src/jquery.tokeninput.js
@@ -20,7 +20,7 @@ var DEFAULT_SETTINGS = {
jsonContainer: null,
contentType: "json",
- // Prepopulation settings
+ // Prepopulation settings
prePopulate: null,
processPrePopulate: false,
@@ -32,13 +32,14 @@ var DEFAULT_SETTINGS = {
animateDropdown: true,
theme: null,
zindex: 999,
- resultsFormatter: function(item){ return "<li>" + item[this.propertyToSearch]+ "</li>" },
- tokenFormatter: function(item) { return "<li><p>" + item[this.propertyToSearch] + "</p></li>" },
+ resultsFormatter: function(item){return "<li>" + item[this.propertyToSearch]+ "</li>"},
+ tokenFormatter: function(item) {return "<li><p>" + item[this.propertyToSearch] + "</p></li>"},
// Tokenization settings
tokenLimit: null,
tokenDelimiter: ",",
preventDuplicates: false,
+ highlightDuplicates: true,
tokenValue: "id",
// Callbacks
@@ -51,7 +52,10 @@ var DEFAULT_SETTINGS = {
idPrefix: "token-input-",
// Keep track if the input is currently in disabled mode
- disabled: false
+ disabled: false,
+
+ // Allowed add token which is not in suggest list
+ allowCustomEntry: false
};
// Default classes to use when theming
@@ -123,7 +127,7 @@ var methods = {
this.data("tokenInputObject").toggleDisabled(disable);
return this;
}
-}
+};
// Expose the .tokenInput function to jQuery as a plugin
$.fn.tokenInput = function (method) {
@@ -275,11 +279,18 @@ $.TokenList = function (input, url_or_data, settings) {
case KEY.TAB:
case KEY.ENTER:
case KEY.NUMPAD_ENTER:
- case KEY.COMMA:
if(selected_dropdown_item) {
- add_token($(selected_dropdown_item).data("tokeninput"));
- hidden_input.change();
- return false;
+ return addSelectedToken();
+ } else if (settings.allowCustomEntry) {
+ return addCurrentTokenInputValue();
+ }
+ break;
+
+ case KEY.COMMA:
+ if (settings.allowCustomEntry) {
+ return addCurrentTokenInputValue();
+ } else if(selected_dropdown_item) {
+ return addSelectedToken();
}
break;
@@ -296,6 +307,20 @@ $.TokenList = function (input, url_or_data, settings) {
}
});
+ function addSelectedToken() {
+ add_token($(selected_dropdown_item).data("tokeninput"));
+ hidden_input.change();
+ return false;
+ }
+
+ function addCurrentTokenInputValue() {
+ var currentTokenInputItem = new Object();
+ currentTokenInputItem[settings.propertyToSearch] = $("#" + settings.idPrefix + input.id).val();
+ add_token(currentTokenInputItem);
+ hidden_input.change();
+ return false;
+ }
+
// Keep a reference to the original input box
var hidden_input = $(input)
.hide()
@@ -403,11 +428,11 @@ $.TokenList = function (input, url_or_data, settings) {
delete_token($(this));
}
});
- }
+ };
this.add = function(item) {
add_token(item);
- }
+ };
this.remove = function(item) {
token_list.children("li").each(function() {
@@ -425,15 +450,15 @@ $.TokenList = function (input, url_or_data, settings) {
}
}
});
- }
+ };
this.getTokens = function() {
return saved_tokens;
- }
+ };
this.toggleDisabled = function(disable) {
toggleDisabled(disable);
- }
+ };
//
// Private functions
@@ -531,16 +556,19 @@ $.TokenList = function (input, url_or_data, settings) {
token_list.children().each(function () {
var existing_token = $(this);
var existing_data = $.data(existing_token.get(0), "tokeninput");
- if(existing_data && existing_data.id === item.id) {
+
+ if(existing_data && existing_data[settings.tokenValue] === item[settings.tokenValue]) {
found_existing_token = existing_token;
return false;
}
});
if(found_existing_token) {
- select_token(found_existing_token);
- input_token.insertAfter(found_existing_token);
- focus_with_timeout(input_box);
+ if(settings.highlightDuplicates) {
+ select_token(found_existing_token);
+ input_token.insertAfter(found_existing_token);
+ focus_with_timeout(input_box);
+ }
return;
}
}
@@ -749,6 +777,7 @@ $.TokenList = function (input, url_or_data, settings) {
} else {
if(settings.noResultsText) {
dropdown.html("<p>"+settings.noResultsText+"</p>");
+ selected_dropdown_item = null;
show_dropdown();
}
}
@@ -797,6 +826,7 @@ $.TokenList = function (input, url_or_data, settings) {
// Do the actual search
function run_search(query) {
+ var self = this;
var cache_key = query + computeURL();
var cached_results = cache.get(cache_key);
if(cached_results) {
@@ -842,8 +872,12 @@ $.TokenList = function (input, url_or_data, settings) {
}
};
+ if(typeof self.currentSearchRequest !== "undefined") {
+ self.currentSearchRequest.abort();
+ }
+
// Make the request
- $.ajax(ajax_params);
+ self.currentSearchRequest = $.ajax(ajax_params);
} else if(settings.local_data) {
// Do the search through local data
var results = $.grep(settings.local_data, function (row) {
@@ -874,7 +908,7 @@ $.TokenList = function (input, url_or_data, settings) {
//
// obj: a jQuery object to focus()
function focus_with_timeout(obj) {
- setTimeout(function() { obj.focus(); }, 50);
+ setTimeout(function() {obj.focus();}, 50);
}
};
Something went wrong with that request. Please try again.