add 'data' query helper

.gitignore

@@ -1,4 +1,5 @@
 .idea
 .vscode
+.cache
 node_modules
 dev/dist

bridge/src/ajax.ts

@@ -1,5 +1,6 @@
-import { QueryFunction, QueryResult } from '../../control/src/search-controller';
+import { QueryFunction, QueryResult } from '../../control/src/abstract-select';
 import { extend } from '../../control/src/util';
+
 export interface Ajax {
     url: string;
     params: (term: string, page: number) => object;

bridge/src/data.ts

@@ -0,0 +1,23 @@
+import { QueryFunction, QueryResult } from '../../control/src/abstract-select';
+
+export interface DataParam {
+    term: string;
+    page: number;
+    selected: any[];
+}
+
+export interface DataResult {
+    values: any[];
+    more: boolean;
+}
+
+export type DataFunction = (param: DataParam) => QueryResult;
+
+export function createQueryFromData(callback: DataFunction): QueryFunction {
+    return (term: string, page: number, token: string) => {
+        return new Promise((resolve, reject) => {
+            const data = callback({ term, page, selected: [] });
+            resolve({ values: data.values, more: data.more, token });
+        });
+    };
+}

bridge/src/select25.tsx

@@ -7,6 +7,7 @@ import '../../control/src/select25.scss';
 import { SingleSelect } from '../../control/src/single-select';
 import { extend } from '../../control/src/util';
 import { Ajax, createQueryFromAjax } from './ajax';
+import { DataFunction, createQueryFromData } from './data';
 import { Store } from './store';
 
 const forceImportOfH = h;
@@ -26,6 +27,7 @@ export interface Options {
     valueContent?: ItemRenderer;
     resultContent?: ItemRenderer;
     query?: QueryFunction;
+    data?: DataFunction;
     ajax?: Ajax;
     quiet?: number;
     minimumCharacters?: number;
@@ -74,6 +76,8 @@ const DEFAULT_OPTIONS = {
             return '';
         }
     },
+    itemId: 'id',
+    itemLabel: 'text',
     minimumCharacters: 0,
     multiple: false,
     openOnFocus: false
@@ -208,8 +212,12 @@ function create<T>(element: HTMLInputElement, options: Options) {
     const store = Store.getStore(element);
 
     options = extend({}, DEFAULT_OPTIONS, options);
-    if (!options.query && options.ajax) {
-        options.query = createQueryFromAjax(options.ajax);
+    if (!options.query) {
+        if (options.ajax) {
+            options.query = createQueryFromAjax(options.ajax);
+        } else if (options.data) {
+            options.query = createQueryFromData(options.data);
+        }
     }
 
     if (!options.tabIndex && element.tabIndex) {

control/src/abstract-select.tsx

@@ -57,6 +57,8 @@ function MarkupRenderer({ markup }) {
 
 export const DEFAULT_PROPS: Partial<Props> = {
     allowDuplicates: false,
+    itemId: 'id',
+    itemLabel: 'text',
     minimumCharacters: 0,
     quiet: 50,
     tabIndex: 0

control/src/multi-select.tsx

@@ -30,7 +30,7 @@ interface State extends AbstractSelectState {
     values: ValueListState;
 }
 
-const DEFAULT_PROPS = extend({}, ABSTRACT_DEFAULT_PROPS, {});
+const DEFAULT_PROPS = extend({}, ABSTRACT_DEFAULT_PROPS, { values: [] });
 
 export class MultiSelect extends AbstractSelect<Props, State> {
     private containerRef: RefObject<HTMLDivElement>;

dev/index.html

@@ -32,6 +32,10 @@
     <p>
         <input type="text" value="focus grabber 3" />
     </p>
+    <section>
+        <input type="hidden" id="colors" s25-style="width:450px" />
+    </section>
+
     <p>
         <label for="select1">Select Single</label>
         <select id="select1">
@@ -132,8 +136,39 @@
 
             value: window.select2countries[0]
         },
-
     );
+
+    window.select25.create(
+        document.getElementById("colors"), {
+            multiple: true,
+            minimumCharacters: 0,
+            data: function (params) {
+                var term = params.term ? params.term.trim() : "";
+                var colors = ["Red", "Green", "Blue"];
+
+                if (term.length > 0) {
+                    var contains = colors.findIndex(c => c.toUpperCase() === term.toUpperCase());
+                    if (contains < 0) {
+                        colors.splice(0, 0, term);
+                    } else {
+                        // move matched element to the top so its selected
+                        var color = colors.splice(contains, 1);
+                        colors.splice(0, 0, color[0]);
+                    }
+                }
+
+                return {
+                    more: false,
+                    values: colors.map(c => {
+                        return {
+                            id: c.toUpperCase(),
+                            text: c
+                        }
+                    })
+                };
+            }
+        }
+    )
 </script>
 
 </html>