diff --git a/public/javascripts/jquery.tokeninput.js b/public/javascripts/jquery.tokeninput.js index 1bcea70..c84245a 100644 --- a/public/javascripts/jquery.tokeninput.js +++ b/public/javascripts/jquery.tokeninput.js @@ -47,7 +47,8 @@ var DEFAULT_CLASSES = { dropdownItem: "token-input-dropdown-item", dropdownItem2: "token-input-dropdown-item2", selectedDropdownItem: "token-input-selected-dropdown-item", - inputToken: "token-input-input-token" + inputToken: "token-input-input-token", + blurText: "token-input-blur-text", }; // Input box position "enum" @@ -159,7 +160,7 @@ $.TokenList = function (input, url_or_data, settings) { // Keep track of the timeout, old vals var timeout; - var input_val; + var input_val = ''; // Create a new text input an attach keyup events var input_box = $("") @@ -169,11 +170,17 @@ $.TokenList = function (input, url_or_data, settings) { .attr("id", settings.idPrefix + input.id) .focus(function () { if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { + if(settings.permanentDropdown) + hide_dropdown_hint(); + else show_dropdown_hint(); } }) .blur(function () { - hide_dropdown(); + if(settings.permanentDropdown) + show_dropdown_hint(); + else + hide_dropdown(); }) .bind("keyup keydown blur update", resize_input) .keydown(function (event) { @@ -334,6 +341,10 @@ $.TokenList = function (input, url_or_data, settings) { do_search(); } + // Hint for permanentDropdown + if(settings.permanentDropdown) + show_dropdown_hint(); + // Magic element to help us resize the text input var input_resizer = $("") .insertAfter(input_box) @@ -418,6 +429,9 @@ $.TokenList = function (input, url_or_data, settings) { var escaped = input_val.replace(/&/g, '&').replace(/\s/g,' ').replace(//g, '>'); input_resizer.html(escaped); input_box.width(input_resizer.width() + 30); + + if(settings.permanentDropdown && input_box.hasClass(settings.classes.blurText)) + input_val = ''; } function is_printable_character(keycode) { @@ -626,12 +640,26 @@ $.TokenList = function (input, url_or_data, settings) { } function show_dropdown_hint () { - if(!settings.permanentDropdown && settings.hintText) { + if(settings.hintText) { + if(settings.permanentDropdown) { + if (input_val == '') { + input_box.val(settings.hintText); + input_box.toggleClass(settings.classes.blurText); + } + } else { dropdown.html("

"+settings.hintText+"

"); show_dropdown(); + } } } + function hide_dropdown_hint () { + if (input_box.hasClass(settings.classes.blurText)) { + input_box.val(''); + input_box.toggleClass(settings.classes.blurText); + } + } + // Highlight the query part of the search term function highlight_term(value, term) { return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "$1"); diff --git a/public/stylesheets/token-input-facebook.css b/public/stylesheets/token-input-facebook.css index b4d8e92..8edd461 100644 --- a/public/stylesheets/token-input-facebook.css +++ b/public/stylesheets/token-input-facebook.css @@ -119,4 +119,8 @@ div.token-input-dropdown-facebook ul li em { div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { background-color: #3b5998; color: #fff; -} \ No newline at end of file +} +.token-input-blur-text-facebook { + font-style: italic; + color: #AAA; +} diff --git a/public/stylesheets/token-input-facet.css b/public/stylesheets/token-input-facet.css index 5b0d05e..9f04e95 100644 --- a/public/stylesheets/token-input-facet.css +++ b/public/stylesheets/token-input-facet.css @@ -113,3 +113,7 @@ div.token-input-dropdown-facet ul li.token-input-selected-dropdown-item-facet { background-color: #d0efa0; } +.token-input-blur-text-facet { + font-style: italic; + color: #AAA; +} diff --git a/public/stylesheets/token-input-mac.css b/public/stylesheets/token-input-mac.css index 18522f0..2ddcd13 100644 --- a/public/stylesheets/token-input-mac.css +++ b/public/stylesheets/token-input-mac.css @@ -202,3 +202,7 @@ div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac span.t div.token-input-dropdown-mac ul li.token-input-selected-dropdown-item-mac.odd span.token-input-dropdown-item-description-mac { color: #fff; } +.token-input-blur-text-mac { + font-style: italic; + color: #AAA; +} diff --git a/public/stylesheets/token-input.css b/public/stylesheets/token-input.css index 1f50f6f..45062e9 100644 --- a/public/stylesheets/token-input.css +++ b/public/stylesheets/token-input.css @@ -110,4 +110,7 @@ div.token-input-dropdown ul li em { div.token-input-dropdown ul li.token-input-selected-dropdown-item { background-color: #d0efa0; } - +.token-input-blur-text { + font-style: italic; + color: #AAA; +} -- libgit2 0.21.2