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

Commit 88fe0a0

Browse files
toneplextoneplex
committed
Added the ability to exclude current tokens from the autocomplete dropdown for a cleaner experience
1 parent 8134937 commit 88fe0a0

File tree

2 files changed

+81
-9
lines changed

2 files changed

+81
-9
lines changed

‎demo.html‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</script>
1616
</head>
1717

18-
<body>
18+
<body style="margin-bottom: 200px;">
1919
<h1>jQuery Tokeninput Demos</h1>
2020

2121
<h2>Simple Server-Backed Search</h2>
@@ -235,9 +235,9 @@ <h2 id="onadd-ondelete">Using onAdd and onDelete Callbacks</h2>
235235

236236
<h2 id="plugin-methods">Using the add, remove, clear and toggleDisabled Methods</h2>
237237
<div>
238-
<a href="#" id="plugin-methods-add">Add Token</a> |
239-
<a href="#" id="plugin-methods-remove">Remove Token</a> |
240-
<a href="#" id="plugin-methods-clear">Clear Tokens</a> |
238+
<a href="#" id="plugin-methods-add">Add Token</a> |
239+
<a href="#" id="plugin-methods-remove">Remove Token</a> |
240+
<a href="#" id="plugin-methods-clear">Clear Tokens</a> |
241241
<a href="#" id="plugin-methods-toggle-disable">Toggle Disabled</a><br />
242242
<input type="text" id="demo-input-plugin-methods" name="blah" />
243243
<input type="button" value="Submit" />
@@ -272,7 +272,7 @@ <h2 id="plugin-methods">Using the add, remove, clear and toggleDisabled Methods<
272272
});
273273
</script>
274274
</div>
275-
275+
276276
<h2>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFormatter</h2>
277277
<div>
278278
<input type="text" id="demo-input-local-custom-formatters" name="blah" />
@@ -674,7 +674,7 @@ <h2>Change propertyToSearch anytime</h2>
674674
});
675675
</script>
676676
</div>
677-
677+
678678
<h2>Start disabled</h2>
679679
<div>
680680
<input type="text" id="demo-input-disabled" name="blah" />
@@ -720,5 +720,31 @@ <h2>Free Tagging</h2>
720720
</script>
721721
</div>
722722

723+
<h2>Exclude Current Tokens From Autocomplete</h2>
724+
<div>
725+
<input type="text" id="demo-input-local-exclude" name="blah" />
726+
<input type="button" value="Submit" />
727+
<script type="text/javascript">
728+
$(document).ready(function() {
729+
$("#demo-input-local-exclude").tokenInput([
730+
{id: 7, name: "Ruby"},
731+
{id: 11, name: "Python"},
732+
{id: 13, name: "JavaScript"},
733+
{id: 17, name: "ActionScript"},
734+
{id: 19, name: "Scheme"},
735+
{id: 23, name: "Lisp"},
736+
{id: 29, name: "C#"},
737+
{id: 31, name: "Fortran"},
738+
{id: 37, name: "Visual Basic"},
739+
{id: 41, name: "C"},
740+
{id: 43, name: "C++"},
741+
{id: 47, name: "Java"}
742+
], {
743+
excludeCurrent: true
744+
});
745+
});
746+
</script>
747+
</div>
748+
723749
</body>
724750
</html>

‎src/jquery.tokeninput.js‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ var DEFAULT_SETTINGS = {
1919
propertyToSearch: "name",
2020
jsonContainer: null,
2121
contentType: "json",
22+
excludeCurrent: false,
23+
excludeCurrentParam: "x",
2224

2325
// Prepopulation settings
2426
prePopulate: null,
@@ -839,8 +841,38 @@ $.TokenList = function (input, url_or_data, settings) {
839841
return template.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + regexp_escape(value) + ")(?![^<>]*>)(?![^&;]+;)", "g"), highlight_term(value, term));
840842
}
841843

844+
// exclude existing tokens from dropdown, so the list is clearer
845+
function excludeCurrent(results) {
846+
// if enabled, remove existing tokens
847+
if ($(input).data("settings").excludeCurrent) {
848+
var currentTokens = $(input).data("tokenInputObject").getTokens(),
849+
trimmedList = [];
850+
if (currentTokens.length > 0) {
851+
$.each(results, function(index, value) {
852+
var notFound = true;
853+
$.each(currentTokens, function(cIndex, cValue) {
854+
if (value[$(input).data("settings").propertyToSearch] == cValue[$(input).data("settings").propertyToSearch]) {
855+
notFound = false;
856+
return false;
857+
}
858+
});
859+
860+
if (notFound) {
861+
trimmedList.push(value);
862+
}
863+
});
864+
results = trimmedList;
865+
}
866+
}
867+
868+
return results;
869+
}
870+
842871
// Populate the results dropdown with some results
843872
function populate_dropdown (query, results) {
873+
// exclude current tokens if configured
874+
results = excludeCurrent(results);
875+
844876
if(results && results.length) {
845877
dropdown.empty();
846878
var dropdown_ul = $("<ul/>")
@@ -939,7 +971,7 @@ $.TokenList = function (input, url_or_data, settings) {
939971
function run_search(query) {
940972
var cache_key = query + computeURL();
941973
var cached_results = cache.get(cache_key);
942-
if(cached_results) {
974+
if (cached_results) {
943975
if ($.isFunction($(input).data("settings").onCachedResult)) {
944976
cached_results = $(input).data("settings").onCachedResult.call(hidden_input, cached_results);
945977
}
@@ -948,7 +980,7 @@ $.TokenList = function (input, url_or_data, settings) {
948980
// Are we doing an ajax search or local data search?
949981
if($(input).data("settings").url) {
950982
var url = computeURL();
951-
// Extract exisiting get params
983+
// Extract existing get params
952984
var ajax_params = {};
953985
ajax_params.data = {};
954986
if(url.indexOf("?") > -1) {
@@ -968,10 +1000,24 @@ $.TokenList = function (input, url_or_data, settings) {
9681000
ajax_params.data[$(input).data("settings").queryParam] = query;
9691001
ajax_params.type = $(input).data("settings").method;
9701002
ajax_params.dataType = $(input).data("settings").contentType;
971-
if($(input).data("settings").crossDomain) {
1003+
if ($(input).data("settings").crossDomain) {
9721004
ajax_params.dataType = "jsonp";
9731005
}
9741006

1007+
// exclude current tokens?
1008+
// send exclude list to the server, so it can also exclude existing tokens
1009+
if ($(input).data("settings").excludeCurrent) {
1010+
var currentTokens = $(input).data("tokenInputObject").getTokens();
1011+
var tokenList = $.map(currentTokens, function (el) {
1012+
if(typeof $(input).data("settings").tokenValue == 'function')
1013+
return $(input).data("settings").tokenValue.call(this, el);
1014+
1015+
return el[$(input).data("settings").tokenValue];
1016+
});
1017+
1018+
ajax_params.data[$(input).data("settings").excludeCurrentParam] = tokenList.join($(input).data("settings").tokenDelimiter);
1019+
}
1020+
9751021
// Attach the success callback
9761022
ajax_params.success = function(results) {
9771023
cache.add(cache_key, $(input).data("settings").jsonContainer ? results[$(input).data("settings").jsonContainer] : results);

0 commit comments

Comments
 (0)