Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #142 from malandrew/master

New features: propertyToSearch, resultsFormatter and tokenFormatter
  • Loading branch information...
commit 6f49fb94496b8fce6870332b13ed2a04230ce4e8 2 parents 921fa8f + 5eb1b0e
@loopj loopj authored
Showing with 201 additions and 6 deletions.
  1. +183 −0 demo.html
  2. +18 −6 src/jquery.tokeninput.js
View
183 demo.html
@@ -243,5 +243,188 @@ <h2 id="plugin-methods">Using the add, remove and clear Methods</h2>
});
</script>
</div>
+
+ <h2>Local Data Search with custom propertyToSearch, resultsFormatter and tokenFormatter</h2>
+ <div>
+ <input type="text" id="demo-input-local-custom-formatters" name="blah" />
+ <input type="button" value="Submit" />
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("#demo-input-local-custom-formatters").tokenInput([{
+ "first_name": "Arthur",
+ "last_name": "Godfrey",
+ "email": "arthur_godfrey@nccu.edu",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Adam",
+ "last_name": "Johnson",
+ "email": "wravo@yahoo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Jeff",
+ "last_name": "Johnson",
+ "email": "bballnine@hotmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Adriana",
+ "last_name": "Jameson",
+ "email": "adriana.jameson@gmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Adriano",
+ "last_name": "Pooley",
+ "email": "adrianolpooley@lautau.com.br",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alcir",
+ "last_name": "Reis",
+ "email": "alcirreis@yahoo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Jack",
+ "last_name": "Cunningham",
+ "email": "jcunningham@hotmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alejandro",
+ "last_name": "Forbes",
+ "email": "alejandforbes@gmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alessandra",
+ "last_name": "Mineiro",
+ "email": "alc_mineiro@aol.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alex",
+ "last_name": "Frazo",
+ "email": "alex.frazo@yahoo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alexandre",
+ "last_name": "Crawford",
+ "email": "xandycrawford@gmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alexandre",
+ "last_name": "Lalwani",
+ "email": "alexandrelalwani@globo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alexandre",
+ "last_name": "Jokos",
+ "email": "alex.jokos@gmail.com.br",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alexandre",
+ "last_name": "Paro",
+ "email": "alexandre.paro@uol.com.br",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Niemeyer",
+ "email": "a.niemeyer@globo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Alyssa",
+ "last_name": "Fortes",
+ "email": "afort287@yahoo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Amit",
+ "last_name": "Alvarenga",
+ "email": "amit.alva@gmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Ana Bia",
+ "last_name": "Borges",
+ "email": "abborges@gmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Ana",
+ "last_name": "Akamine",
+ "email": "ana.akamine@uol.com.br",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Anderson",
+ "last_name": "Tovoros",
+ "email": "alvarenga.tovoros@gmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Borges",
+ "email": "andreborges@hotmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Wexler",
+ "email": "andre.wexler@aol.com.br",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Williams",
+ "email": "awilly@yahoo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Sanford",
+ "email": "andre.sanford@gmail.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Wayne",
+ "email": "andrewayne@uol.com.br",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Jackson",
+ "email": "andre.jackson@yahoo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Jolly",
+ "email": "andre.jolly@uol.com.br",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ },
+ {
+ "first_name": "Andre",
+ "last_name": "Henderson",
+ "email": "andre.henderson@globo.com",
+ "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
+ }
+ ], {
+ propertyToSearch: "first_name",
+ resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.first_name + " " + item.last_name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div></div></li>" },
+ tokenFormatter: function(item) { return "<li><p>" + item.first_name + " " + item.last_name + "</p></li>" },
+ });
+ });
+ </script>
+ </div>
</body>
</html>
View
24 src/jquery.tokeninput.js
@@ -11,6 +11,7 @@
(function ($) {
// Default settings
var DEFAULT_SETTINGS = {
+ propertyToSearch: "name",
hintText: "Type in a search term",
noResultsText: "No results",
searchingText: "Searching...",
@@ -28,6 +29,8 @@ var DEFAULT_SETTINGS = {
prePopulate: null,
processPrePopulate: false,
animateDropdown: true,
+ resultsFormatter: function(item){ return "<li>" + item[this.propertyToSearch]+ "</li>" },
+ tokenFormatter: function(item) { return "<li><p>" + item[this.propertyToSearch] + "</p></li>" },
onResult: null,
onAdd: null,
onDelete: null,
@@ -426,7 +429,8 @@ $.TokenList = function (input, url_or_data, settings) {
// Inner function to a token to the list
function insert_token(item) {
- var this_token = $("<li><p>"+ item.name +"</p></li>")
+ var this_token = settings.tokenFormatter(item);
+ this_token = $(this_token)
.addClass(settings.classes.token)
.insertBefore(input_token);
@@ -441,7 +445,8 @@ $.TokenList = function (input, url_or_data, settings) {
});
// Store data on the token
- var token_data = {"id": item.id, "name": item.name};
+ var token_data = {"id": item.id};
+ token_data[settings.propertyToSearch] = item[settings.propertyToSearch];
$.data(this_token.get(0), "tokeninput", item);
// Save this token for duplicate checking
@@ -627,6 +632,10 @@ $.TokenList = function (input, url_or_data, settings) {
function highlight_term(value, term) {
return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
}
+
+ function find_value_and_highlight_term(template, value, term) {
+ return template.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + value + ")(?![^<>]*>)(?![^&;]+;)", "g"), highlight_term(value, term));
+ }
// Populate the results dropdown with some results
function populate_dropdown (query, results) {
@@ -645,9 +654,12 @@ $.TokenList = function (input, url_or_data, settings) {
.hide();
$.each(results, function(index, value) {
- var this_li = $("<li>" + highlight_term(value.name, query) + "</li>")
- .appendTo(dropdown_ul);
-
+ var this_li = settings.resultsFormatter(value);
+
+ this_li = find_value_and_highlight_term(this_li ,value[settings.propertyToSearch], query);
+
+ this_li = $(this_li).appendTo(dropdown_ul);
+
if(index % 2) {
this_li.addClass(settings.classes.dropdownItem);
} else {
@@ -769,7 +781,7 @@ $.TokenList = function (input, url_or_data, settings) {
} else if(settings.local_data) {
// Do the search through local data
var results = $.grep(settings.local_data, function (row) {
- return row.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
+ return row[settings.propertyToSearch].toLowerCase().indexOf(query.toLowerCase()) > -1;
});
if($.isFunction(settings.onResult)) {
Please sign in to comment.
Something went wrong with that request. Please try again.