feat: allow searching whole string in autocomplete mode by allowing a…

…utocompleteSeparator to be null zurb#646

- Default value of autocompleteSeparator = /\s+/
- Update types & readme
- Fix: searchOpts.caseSensitive not working

README.md

@@ -200,14 +200,20 @@ Collection object shown with defaults:
   searchOpts: {
     pre: '<span>',
     post: '</span>',
-    skip: false // true will skip local search, useful if doing server-side search
+    skip: false, // true will skip local search, useful if doing server-side search
+    caseSensitive: false
   },
 
   // Limits the number of items in the menu
   menuItemLimit: 25,
 
   // specify the minimum number of characters that must be typed before menu appears
-  menuShowMinLength: 0
+  menuShowMinLength: 0,
+
+  // specify a regex to define after which characters the autocomplete option should open
+  // If null is used then it will not split the string & search in the whole line
+  // default value is /\s+/ means it will split on whitespace when this is not specified
+  autocompleteSeparator: /\s+/,
 }
 ```
 

src/Tribute.js

@@ -14,7 +14,7 @@ class Tribute {
     itemClass = "",
     trigger = "@",
     autocompleteMode = false,
-    autocompleteSeparator = null,
+    autocompleteSeparator = /\s+/,
     selectTemplate = null,
     menuItemTemplate = null,
     lookup = "key",
@@ -302,7 +302,8 @@ class Tribute {
       let items = this.search.filter(this.current.mentionText, values, {
         pre: this.current.collection.searchOpts.pre || "<span>",
         post: this.current.collection.searchOpts.post || "</span>",
-        skip: this.current.collection.searchOpts.skip,
+        skip: this.current.collection.searchOpts.skip || false,
+        caseSensitive: this.current.collection.searchOpts.caseSensitive || false,
         extract: el => {
           if (typeof this.current.collection.lookup === "string") {
             return el[this.current.collection.lookup];

src/TributeRange.js

@@ -261,8 +261,13 @@ class TributeRange {
 
     getLastWordInText(text) {
         var wordsArray;
-        if (this.tribute.autocompleteSeparator) {
-            wordsArray = text.split(this.tribute.autocompleteSeparator);
+        if (this.tribute.autocompleteMode) {
+            if (this.tribute.autocompleteSeparator) {
+                wordsArray = text.split(this.tribute.autocompleteSeparator);
+            }
+            else {
+                wordsArray = [text];
+            }
         } else {
             wordsArray = text.split(/\s+/);
         }

tributejs.d.ts

@@ -10,9 +10,10 @@ export type TributeItem<T extends {}> = {
 };
 
 export type TributeSearchOpts = {
-  pre: string;
-  post: string;
-  skip: boolean;
+  pre?: string;
+  post?: string;
+  skip?: boolean;
+  caseSensitive?: boolean;
 };
 
 export type TributeCollection<T extends {}> = {
@@ -72,7 +73,9 @@ export type TributeCollection<T extends {}> = {
   autocompleteMode?: boolean;
 
   // specify a regex to define after which characters the autocomplete option should open
-  autocompleteSeparator?: RegExp;
+  // If null is used then it will not split the string & search in the whole line
+  // default value is /\s+/ means it will split on whitespace when this is not specified
+  autocompleteSeparator?: RegExp | null;
 
   // Customize the elements used to wrap matched strings within the results list
   searchOpts?: TributeSearchOpts;