From fe592f6539509d12792100237c20a63befd54588 Mon Sep 17 00:00:00 2001
From: Matt Zollinhofer <matt.zollinhofer@gmail.com>
Date: Sun, 24 May 2020 16:03:46 -0400
Subject: [PATCH] initial pass at a 'no results found' implementation.

There some issues though:
1) Doesn't handle 'minMatchedCharacters'. It needs to handle initial
typing and also backspacing

2) Do we want an additional config for whether to show this message at
all? Is there a class of users who will not want to show this message?

3) What about a custom message? Do we want to provide access to the
characters the user has already typed as part of a custom message?
---
 CHANGELOG.md                                 | 2 ++
 docs/guide/reference.md                      | 1 +
 src/components/VueTypeAheadBootstrap.vue     | 4 ++++
 src/components/VueTypeaheadBootstrapList.vue | 9 +++++++++
 4 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a9558da..5dfedab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## 2.0.2 - 22 May 2020
+- Add `noResultInfo` for when there are no results matching the user's search
 ## 2.0.1 - 22 May 2020
 - Add migration instructions
 
diff --git a/docs/guide/reference.md b/docs/guide/reference.md
index c27bd9c..a0863af 100644
--- a/docs/guide/reference.md
+++ b/docs/guide/reference.md
@@ -13,6 +13,7 @@
 | inputClass | String | | Class to be added to the `input` tag for validation, etc.
 | maxMatches | Number | 10 | Maximum amount of list items to appear.
 | minMatchingChars | Number | 2 | Minimum matching characters in query before the typeahead list appears
+| noResultsInfo | String | 'No results found.' | Text to show when no results are found for what the user typed.
 | prepend | String | | Text to be prepended to the `input-group`
 | serializer | Function | `input => input`| Function used to convert the entries in the data array into a text string. |
 | showAllResults | `Boolean` | false | Show all results even ones that highlighting doesn't match. This is useful when interacting with a API that returns results based on different values than what is displayed. Ex: user searches for "USA" and the service returns "United States of America".
diff --git a/src/components/VueTypeAheadBootstrap.vue b/src/components/VueTypeAheadBootstrap.vue
index 725d556..0c92418 100644
--- a/src/components/VueTypeAheadBootstrap.vue
+++ b/src/components/VueTypeAheadBootstrap.vue
@@ -105,6 +105,10 @@ export default {
       type: Boolean,
       default: false
     },
+    noResultsInfo: {
+      type: String,
+      default: "No results found."
+    },
     showOnFocus: {
       type: Boolean,
       default: false
diff --git a/src/components/VueTypeaheadBootstrapList.vue b/src/components/VueTypeaheadBootstrapList.vue
index 752679b..d2c84e6 100644
--- a/src/components/VueTypeaheadBootstrapList.vue
+++ b/src/components/VueTypeaheadBootstrapList.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="list-group shadow" ref="suggestionList">
+    <div class="vbst-item list-group-item list-group-item-action" v-if="matchedItems.length == 0">{{ noResultsInfo }}</div>
     <vue-typeahead-bootstrap-list-item
+      v-else-if="matchedItems.length > 0"
       v-for="(item, id) in matchedItems" :key="id"
       :active="isListItemActive(id)"
       :data="item.data"
@@ -62,6 +64,10 @@ export default {
       type: Number,
       default: 2
     },
+    noResultsText: {
+      type: String,
+      default: "No results found."
+    },
     showOnFocus: {
       type: Boolean,
       default: false
@@ -89,6 +95,9 @@ export default {
   },
 
   computed: {
+    noResultsInfo() {
+      return "Searched for: " +this.query+ ". " + this.noResultsText
+    },
     highlight() {
       return text => {
         text = sanitize(text)