restore previous prerecorded values search system

src/components/Feature/Edit/FeatureExtraForm.vue

@@ -63,7 +63,10 @@
     </label>
     <Multiselect
       v-model="selectedPrerecordedValue"
-      :options="prerecordedOptions"
+      :options="
+        selectedPrerecordedListValues[field.options[0]] ? selectedPrerecordedListValues[field.options[0]] : []
+      "
+      :options-limit="10"
       :allow-empty="!field.is_mandatory"
       track-by="label"
       label="label"
@@ -77,14 +80,14 @@
       :loading="loadingPrerecordedListValues"
       :clear-on-select="false"
       :preserve-search="false"
-      @search-change="searchPrerecordedValue"
+      @search-change="search"
       @select="selectPrerecordedValue"
     >
       <template slot="clear">
         <div
           v-if="selectedPrerecordedValue"
           class="multiselect__clear"
-          @click.prevent.stop="clearPrerecordedValue"
+          @click.prevent.stop="clear"
         >
           <i
             class="close icon"
@@ -156,8 +159,7 @@
       {{ field.label }}
     </label>
     <div class="ui input">
-      <!-- //* si l'utilisateur clique sur fléche dans champ input, il n'y pas d'événement focus déclenché, -->
-      <!-- //* donc pas de blur à la sortie, on doit donc écouter l'événement onChange avec @change -->
+      <!-- //* si click sur fléche dans champ input, pas de focus, donc pas de blur, donc utilisation de @change -->
       <input
         :id="field.name"
         :value="field.value"
@@ -301,10 +303,9 @@ export default {
   data() {
     return {
       error: null,
-      prerecordedOptions: [],
+      prerecordedListSearchQuery: null,
       loadingPrerecordedListValues: false,
       selectedPrerecordedValue: null,
-      limit: 10,
       selectedMultipleCheckbox: [],
     };
   },
@@ -337,6 +338,19 @@ export default {
         this.error = null;
       }
     },
+    prerecordedListSearchQuery(newValue) {
+      this.loadingPrerecordedListValues = true;
+      this.GET_SELECTED_PRERECORDED_LIST_VALUES({
+        name: this.field.options[0],
+        pattern: newValue
+      })
+        .then(() => {
+          this.loadingPrerecordedListValues = false;
+        })
+        .catch(() => {
+          this.loadingPrerecordedListValues = false;
+        });
+    }
   },
 
   created() {
@@ -363,7 +377,6 @@ export default {
     }
   },
 
-
   methods: {
     ...mapActions('feature-type', [
       'GET_SELECTED_PRERECORDED_LIST_VALUES'
@@ -394,20 +407,19 @@ export default {
       return isValid;
     },
 
-    searchPrerecordedValue(text) {
-      let options = this.selectedPrerecordedListValues[this.field.options[0]] || [];
-      this.prerecordedOptions = options.filter(item => {
-        return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1;
-      }).slice(0, this.limit);
+    search(text) {
+      this.prerecordedListSearchQuery = text;
     },
 
     selectPrerecordedValue(e) {
       this.selectedPrerecordedValue = e.label;
+      this.prerecordedListSearchQuery = null;
       this.updateStore_extra_form({ target: { value:  this.selectedPrerecordedValue } });
     },
 
-    clearPrerecordedValue() {
+    clear() {
       this.selectedPrerecordedValue = null;
+      this.prerecordedListSearchQuery = null;
     },
 
     selectMultipleCheckbox(e) {