Merge pull request #439 from market76/master

Add Support For Placeholders

Author: loopj

src/jquery.tokeninput.js

@@ -30,6 +30,7 @@ var DEFAULT_SETTINGS = {
     searchingText: "Searching...",
     deleteText: "×",
     animateDropdown: true,
+    placeholder: null,
     theme: null,
     zindex: 999,
     resultsLimit: null,
@@ -362,6 +363,10 @@ $.TokenList = function (input, url_or_data, settings) {
             }
         });
 
+    // Keep reference for placeholder
+    if (settings.placeholder)
+        input_box.attr("placeholder", settings.placeholder)
+
     // Keep a reference to the original input box
     var hidden_input = $(input)
                            .hide()
@@ -446,6 +451,7 @@ $.TokenList = function (input, url_or_data, settings) {
         $.each(li_data, function (index, value) {
             insert_token(value);
             checkTokenLimit();
+            input_box.attr("placeholder", null)
         });
     }
 
@@ -501,6 +507,9 @@ $.TokenList = function (input, url_or_data, settings) {
         toggleDisabled(disable);
     };
 
+    // Resize input to maximum width so the placeholder can be seen
+    resize_input();
+
     //
     // Private functions
     //
@@ -537,9 +546,13 @@ $.TokenList = function (input, url_or_data, settings) {
     function resize_input() {
         if(input_val === (input_val = input_box.val())) {return;}
 
+        // Get width left on the current line
+        var width_left = token_list.width() - input_box.offset().left - token_list.offset().left;
         // Enter new content into resizer and resize input accordingly
         input_resizer.html(_escapeHTML(input_val));
-        input_box.width(input_resizer.width() + 30);
+        // Get maximum width, minimum the size of input and maximum the widget's width
+        input_box.width(Math.min(token_list.width(),
+                                 Math.max(width_left, input_resizer.width() + 30)));
     }
 
     function is_printable_character(keycode) {
@@ -635,9 +648,14 @@ $.TokenList = function (input, url_or_data, settings) {
             }
         }
 
+        // Squeeze input_box so we force no unnecessary line break
+        input_box.width(0);
+
         // Insert the new tokens
         if($(input).data("settings").tokenLimit == null || token_count < $(input).data("settings").tokenLimit) {
             insert_token(item);
+            // Remove the placeholder so it's not seen after you've added a token
+            input_box.attr("placeholder", null)
             checkTokenLimit();
         }
 
@@ -720,6 +738,9 @@ $.TokenList = function (input, url_or_data, settings) {
 
         // Remove this token from the saved list
         saved_tokens = saved_tokens.slice(0,index).concat(saved_tokens.slice(index+1));
+        if (saved_tokens.length == 0) {
+            input_box.attr("placeholder", settings.placeholder)
+        }
         if(index < selected_token_index) selected_token_index--;
 
         // Update the hidden input
@@ -1019,3 +1040,4 @@ $.TokenList.Cache = function (options) {
     };
 };
 }(jQuery));
+