add option to limit fetch trigger, fix #40

README.md

@@ -56,7 +56,7 @@ valueField        | string           | `null`     | Property to be used as value
 labelField        | string           | `null`     | Property shown in dropdown (if not specified, will be selected automatically)
 disabledField     | string           | `$disabled`| Property to check, whether given options should be disabled and unselectable
 required          | bool             | `false`    | make sense only when `name` is defined
-placeholder       | string           | `'Select'` | Input placeholder
+placeholder       | string           | `Select`   | Input placeholder
 searchable        | bool             | `true`     | Allow search among items by typing
 disabled          | bool             | `false`    | Disable component
 renderer          | string\|function | `null`     | dropdown and selection renderer function. More info in item rendering section
@@ -68,14 +68,15 @@ max               | number           | `0`        | Maximum allowed items select
 collapseSelection | bool             | `false`    | collapse selection when `multiple` and not focused
 name              | string           | `null`     | create `<select>`, usable for normal forms.
 creatable         | bool             | `false`    | Allow creating new item(s)
-creatablePrefix   | string           | `'*'`      | Prefix marking new item
+creatablePrefix   | string           | `*`        | Prefix marking new item
 allowEditing      | bool             | `false`    | When pressing `Backspace` switch to edit mode instead of removing newly created item
 keepCreated       | bool             | `true`     | Switch whether to add newly created option to option list or not
-delimiter         | string           | `','`      | split inserted text when pasting to create multiple items
+delimiter         | string           | `,`        | split inserted text when pasting to create multiple items
 fetch             | string\|function | `null`     | Check "remote datasource" section for more details
-fetchMode         | string           | `'auto'`   | When set to `init` options are fetched only when mounted, when searching it search in downloaded dataset
+fetchMode         | string           | `auto`     | When set to `init` options are fetched only when mounted, when searching it search in downloaded dataset
 fetchCallback     | function         | `null`     | optional fetch callback
 fetchResetOnBlur  | bool             | `true`     | reset previous search results on empty input, related to `resetOnBlur`
+minQuery          | number           | `1`        | Minimal amount of characters required to perform remote request. Usable with `fetch` property
 lazyDropdown      | bool             | `true`     | render dropdown after first focus, not by default
 virtualList       | bool             | `false`    | Whether use virtual list for dropdown items (useful for large datasets)
 vlHeight          | number           | `null`     | Height of virtual list dropdown (if not specified, computed automatically)
@@ -84,7 +85,7 @@ searchField       | string\|array    | `null`     | Specify item property that w
 sortField         | string           | `null`     | Specify sort property. If not specified, `labelField` will be used
 disableSifter     | bool             | `false`    | Disable Sifter filtering & sorting. Can be useful in combination with `fetch`, when further filtering or sorting may be undesired
 disableHighlight  | bool             | `false`    | Disable highlighting of input value in results. Can be useful with a `renderer` function that includes additional text or does its own highlighting
-class             | string           | `'svelecte-control'` | default css class
+class             | string           | `svelecte-control` | default css class
 style             | string           | `null`     | inline style
 hasAnchor         | bool             | `null`     | `internal`: when passing also existing select (for CE)
 i18n              | object           | `null`     | I18n object overriding default settings
@@ -119,6 +120,7 @@ This is default value of `i18n` property:
     nomatch: 'No matching options',    
     max: num => `Maximum items ${num} selected`,
     fetchBefore: 'Type to search',
+    fetchQuery: minQuery => `Type ${minQuery > 1 ? `at least ${minQuery} characters ` : '' }to search`,
     fetchEmpty: 'No data related to your search',
     collapsedSelection: count => `${count} selected`,
     createRowLabel: value => `Create '${value}'`
@@ -140,6 +142,7 @@ config.i18n = {
     nomatch: '✋',
     max: num => '🙄',
     fetchBefore: '💻',
+    fetchQuery: minQuery => '🧮',
     fetchEmpty: '🚮',
     collapsedSelection: () => '🗃',
     createRowLabel: value => `📝 ${value}`

component.js

@@ -15,7 +15,7 @@ const OPTION_LIST = [
   // creating
   'creatable', 'creatablePrefix', 'allow-editing', 'keepCreated', 'delimiter',
   // remote
-  'fetch', 'fetch-reset-on-blur',
+  'fetch', 'fetch-reset-on-blur', 'min-query',
   // perf & virtual list
   'lazy-dropdown', 'virtual-list', 'vl-height', 'vl-item-size',
   // sifter
@@ -63,6 +63,8 @@ function formatValue(name, value) {
       return value !== null && value !== 'false';
     case 'max':
       return isNaN(parseInt(value)) ? 0 : parseInt(value);
+    case 'min-query':
+      return isNaN(parseInt(value)) ? config.minQuery : parseInt(value);
   }
   return value;
 }
@@ -190,6 +192,20 @@ class SvelecteElement extends HTMLElement {
           this.setAttribute('max', value);
         }
       },
+      'minQuery': {
+        get() {
+          return this.getAttribute('min-query') || config.minQuery;
+        },
+        set(value) {
+          try {
+            value = parseInt(value);
+            if (value < 1) value = 1;
+          } catch (e) {
+            value = config.minQuery;
+          }
+          this.setAttribute('min-query', value);
+        }
+      },
       'renderer': {
         get() {
           return this.getAttribute('renderer') || 'default';

docs/index.html

@@ -370,6 +370,13 @@ <h4>&bull; Remote datasource &bull;</h4>
                       Reset previous search results on empty input.
                     </dd>
                   </dl>
+
+                  <dl>
+                    <dt><span class="label">minQuery:</span> <code>number</code></dt>
+                    <dd>
+                      Force minimal length of input text to trigger remote request.
+                    </dd>
+                  </dl>
                   <dl>
                     <dt><span class="label">disableSifter:</span> <code>bool</code></dt>
                     <dd>
@@ -772,6 +779,11 @@ <h4 id="options">Options</h4>
                 <td>Reset previous search results on empty input, related to <code>resetOnBlur</code></td>
               </tr>
               <tr>
+                  <td>minQuery</td>
+                  <td>number</td>
+                  <td><code>1</code></td>
+                  <td>Minimal amount of characters required to perform remote request. Valid only in combination with <code>fetch</code> defined</td>
+              </tr>
               <tr>
                 <td>disableSifter</td>
                 <td>bool</td>
@@ -886,12 +898,6 @@ <h4 id="api">API</h4>
               </tr>
             </thead>
             <tbody>
-              <tr>
-                <td>selection</td>
-                <td>property</td>
-                <td>-</td>
-                <td>setter/getter - selected value(s) as objects, for binding. For usage in Svelte</td>
-              </tr>
               <tr>
                 <td>focus</td>
                 <td>function</td>
@@ -957,12 +963,6 @@ <h4>Localization</h4>
   <br>
 </p>
 
-<p class="toast toast-warning">
-  <b>NOTE:</b> Local I18n override is not supported for custom-element. In that case you need to access <code>svelecte</code>
-  property and use component API (<code>$set</code> method) to update it programmatically.
-</p>
-
-
 <pre class="code"><code class="javascript">import Svelecte, { config } from 'svelecte';
 
 // global override
@@ -978,7 +978,7 @@ <h4>Localization</h4>
 
 </code></pre>
 
-Exampe for custom element:
+Example for custom element:
 
 <pre class="code"><code class="javascript">Svelecte.config.i18n = {
   /** here replace all keys.*/
@@ -992,6 +992,12 @@ <h4>Localization</h4>
 </code></pre>
           </div>
 
+<span class="toast toast-warning">
+  <b>NOTE:</b> Local I18n override is not supported for custom-element. In that case you need to access <code>svelecte</code>
+  property and use component API (<code>$set</code> method) to update it programmatically.
+</span>
+
+
           <div class="footer">
             Made with <a href="https://svelte.dev">Svelte</a> ❤ by <a href="https://github.com/mskocik">Martin Skocik</a>
           </div>

docs/src/06-fetch.svelte

@@ -30,26 +30,36 @@
   }]
   
   let selectionWork = [initialOptions[0]];
+  let minQueryValue = 2;
 </script>
 
 <Svelecte
   options={initialOptions}
   {resetOnBlur}
   {fetchResetOnBlur}
   bind:selection={selectionWork}
+  minQuery={minQueryValue}
   multiple
   placeholder="Start typing ('re' for example)"
   fetch="https://jsonplaceholder.typicode.com/users/?email_like=[query]"
 ></Svelecte>
 <div>
   <b>Selected:</b>
   <span class="float-right">
+    Min. query length:<input type="number" min="1" step="1" bind:value={minQueryValue} class="small-input">
     <label for="rob" class="mr-2">
       <input type="checkbox" name="" id="rob" bind:checked={resetOnBlur}> Reset on blur
     </label>
     <label for="frob">
       <input type="checkbox" name="" id="frob" bind:checked={fetchResetOnBlur}> Reset search results on empty input
     </label>
   </span>
-  <pre class="mt-1">{ JSON.stringify(selectionWork) }</pre>
-</div>
+  <pre class="mt-2">{ JSON.stringify(selectionWork) }</pre>
+</div>
+
+<style>
+  .small-input {
+    width: 50px;
+    height: 20px;
+  }
+</style>

src/Svelecte.svelte

@@ -58,6 +58,7 @@
   export let fetchMode = 'auto';
   export let fetchCallback = defaults.fetchCallback;
   export let fetchResetOnBlur = true;
+  export let minQuery = defaults.minQuery;
   // performance
   export let lazyDropdown = defaults.lazyDropdown;
   // virtual list
@@ -181,6 +182,7 @@
         }
         return;
       }
+      if (value && value.length < minQuery) return;
       isFetchingData = true;
       hasDropdownOpened.set(false);
       debouncedFetch(value);
@@ -229,11 +231,15 @@
   }
   $: listMessage = maxReached
     ? _i18n.max(max)
-    : ($inputValue.length && availableItems.length === 0
+    : ($inputValue.length && availableItems.length === 0 && minQuery <= 1
       ? _i18n.nomatch
-      : fetch
-        ? _i18n.fetchBefore
+      : (fetch
+        ? (minQuery <= 1 
+          ? _i18n.fetchBefore
+          : _i18n.fetchQuery(minQuery)
+        )
         : _i18n.empty
+      )
     );
   $: itemRenderer = typeof renderer === 'function' ? renderer : (formatterList[renderer] || formatterList.default.bind({ label: currentLabelField}));
   $: {

src/settings.js

@@ -24,6 +24,7 @@ const settings = {
   delimiter: ',',
   // remote
   fetchCallback: null,
+  minQuery: 1,
   // performance
   lazyDropdown: true,
   // virtual list
@@ -36,6 +37,7 @@ const settings = {
     nomatch: 'No matching options',    
     max: num => `Maximum items ${num} selected`,
     fetchBefore: 'Type to search',
+    fetchQuery: minQuery => `Type ${minQuery > 1 ? `at least ${minQuery} characters ` : '' }to search`,
     fetchEmpty: 'No data related to your search',
     collapsedSelection: count => `${count} selected`,
     createRowLabel: value => `Create '${value}'`