initial pass at a 'no results found' implementation.

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
 

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".

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

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)