feat : input placeholder can be customized

README.md

@@ -26,7 +26,7 @@ const viewUserSelection = (data: Object) => {
 </setup>
 <template>
   
-  <VuePredictiveSearch @selected="viewUserSelection" inputClasses="searchInput" :source="books" label="title" :fieldsToSearchFrom="['title', 'author', 'genre']" :fieldsToReturnOnMatch="['title', 'author', 'genre', 'price', 'publicationYear','id']">
+  <VuePredictiveSearch @selected="viewUserSelection" inputClasses="searchInput" :source="books" label="title" :fieldsToSearchFrom="['title', 'author', 'genre']" :fieldsToReturnOnMatch="['title', 'author', 'genre', 'price', 'publicationYear','id']" inputPlaceholder="What book are you looking for?">
     <template #no-element-found>
       <p>No element found</p>
     </template>
@@ -45,6 +45,7 @@ const viewUserSelection = (data: Object) => {
 - __fieldsToSearchFrom__: Array of field names to search from.
 - __fieldsToReturnOnMatch__: Array of field names to return when a match is found.
 - __inputClasses (Optional)__: Custom classes for the search input.
+- __inputPlaceholder__ : The placeholder for the search input, default to : 'What are you looking for?'
 
 📌 The component is using slots to allow a high customization, you will bring your own UI, just make sure to attach everything to the proper named slot
 

package.json

@@ -6,7 +6,7 @@
       "url": "https://github.com/ElvisAns/VuePredictiveSearch"
     },
     "license": "MIT",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "The most flexible search component for vuejs applications with auto suggestion and fuzzy search feature",
     "main": "./dist/vue-predictive-search.umd.cjs",
     "module": "./dist/vue-predictive-search.js",

src/components/VuePredictiveSearch.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input :class="inputClasses" @input="updateSuggestionList" type="search" v-model="search" placeholder="what are you looking for?" />
+    <input :class="inputClasses" @input="updateSuggestionList" type="search" v-model="search" :placeholder="inputPlaceholder" />
     <div v-if="!items.length && !hasNeverSearch">
       <slot name="no-element-found"></slot>
     </div>
@@ -23,7 +23,11 @@ const props = defineProps({
   label: { type: String, required: true },
   fieldsToSearchFrom: { type: Array, required: true },
   fieldsToReturnOnMatch: { type: Array, required: true },
-  inputClasses: String
+  inputClasses: String,
+  inputPlaceholder : {
+    type : String,
+    default : 'What are you looking for?'
+  }
 })
 var searchEngine;
 const items = ref([])