Right aligned token input.

src/jquery.tokeninput.js

@@ -70,7 +70,9 @@
     idPrefix: "token-input-",
 
     // Keep track if the input is currently in disabled mode
-    disabled: false
+    disabled: false,
+
+    rightAligned: false
   };
 
   // Default classes to use when theming
@@ -87,7 +89,10 @@
     selectedDropdownItem : "token-input-selected-dropdown-item",
     inputToken           : "token-input-input-token",
     focused              : "token-input-focused",
-    disabled             : "token-input-disabled"
+    disabled             : "token-input-disabled",
+    rightAlignedDropdown : "keep-right",
+    rightAlignedInput    : "token-input-right",
+    addTokenOnRight      : "token-on-right"
   };
 
   // Input box position "enum"
@@ -408,7 +413,10 @@
 
       // The list to store the token items in
       var token_list = $("<ul />")
-          .addClass($(input).data("settings").classes.tokenList)
+          if($(input).data("settings").rightAligned) {
+            token_list.addClass($(input).data("settings").classes.rightAlignedInput);
+          }
+          token_list.addClass($(input).data("settings").classes.tokenList)
           .click(function (event) {
               var li = $(event.target).closest("li");
               if(li && li.get(0) && $.data(li.get(0), "tokeninput")) {
@@ -606,6 +614,10 @@
 
           $this_token.addClass($(input).data("settings").classes.token).insertBefore(input_token);
 
+          if($(input).data("settings").rightAligned){
+            $this_token.addClass($(input).data("settings").classes.addTokenOnRight)
+          }
+
           // The 'delete token' button
           if(!readonly) {
             $("<span>" + $(input).data("settings").deleteText + "</span>")
@@ -811,14 +823,16 @@
 
       function show_dropdown_searching () {
           if($(input).data("settings").searchingText) {
-              dropdown.html("<p>" + escapeHTML($(input).data("settings").searchingText) + "</p>");
+            var alignment_class = ($(input).data("settings").rightAligned)? $(input).data("settings").classes.rightAlignedDropdown : ""
+              dropdown.html("<p class="+alignment_class+">" + escapeHTML($(input).data("settings").searchingText) + "</p>");
               show_dropdown();
           }
       }
 
       function show_dropdown_hint () {
           if($(input).data("settings").hintText) {
-              dropdown.html("<p>" + escapeHTML($(input).data("settings").hintText) + "</p>");
+            var alignment_class = ($(input).data("settings").rightAligned)? $(input).data("settings").classes.rightAlignedDropdown : ""
+              dropdown.html("<p class="+alignment_class+">" + escapeHTML($(input).data("settings").hintText) + "</p>");
               show_dropdown();
           }
       }
@@ -904,6 +918,8 @@
                   } else {
                       this_li.addClass($(input).data("settings").classes.dropdownItem2);
                   }
+                  if($(input).data("settings").rightAligned)
+                    this_li.addClass($(input).data("settings").classes.rightAlignedDropdown);
 
                   if(index === 0 && $(input).data("settings").autoSelectFirstResult) {
                       select_dropdown_item(this_li);
@@ -921,7 +937,8 @@
               }
           } else {
               if($(input).data("settings").noResultsText) {
-                  dropdown.html("<p>" + escapeHTML($(input).data("settings").noResultsText) + "</p>");
+                  var alignment_class = ($(input).data("settings").rightAligned)? $(input).data("settings").classes.rightAlignedDropdown : ""
+                  dropdown.html("<p  class="+alignment_class+">" + escapeHTML($(input).data("settings").noResultsText) + "</p>");
                   show_dropdown();
               }
           }

styles/token-input.css

@@ -1,7 +1,7 @@
 /* Example tokeninput style #1: Token vertical list*/
 ul.token-input-list {
-    overflow: hidden; 
-    height: auto !important; 
+    overflow: hidden;
+    height: auto !important;
     height: 1%;
     width: 400px;
     border: 1px solid #999;
@@ -44,8 +44,8 @@ ul.token-input-disabled li.token-input-token span {
 }
 
 li.token-input-token {
-    overflow: hidden; 
-    height: auto !important; 
+    overflow: hidden;
+    height: auto !important;
     height: 1%;
     margin: 3px;
     padding: 3px 5px;
@@ -125,3 +125,15 @@ div.token-input-dropdown ul li em {
 div.token-input-dropdown ul li.token-input-selected-dropdown-item {
     background-color: #d0efa0;
 }
+
+.keep-right{
+    text-align: right;
+}
+
+.token-input-right {
+    direction : rtl;
+}
+
+.token-on-right {
+    float : right !important;
+}