diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 62187d1b0ddf0d5ed85967b357857bf8efef51f9..a5f75d882153e4ee0443ba0d58cc466b669cfc3e 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -5,17 +5,29 @@
       { 'active visible': isOpen },
       { disabled },
     ]"
-    @click="isOpen = !isOpen"
+    @click="toggleDropdown"
   >
+    <input
+      v-if="search"
+      class="search"
+      autocomplete="off"
+      tabindex="0"
+      @input="handelInput"
+      v-on:keyup.enter="select(0)"
+      v-model="input"
+    />
     <div class="default text">{{ selected }}</div>
-    <i class="dropdown icon"></i>
+    <i
+      :class="['dropdown icon', { clear: search && selected }]"
+      @click="clear"
+    ></i>
     <div :class="['menu', { 'visible transition': isOpen }]">
       <div
         v-for="(option, index) in processedOptions || ['No results found.']"
         @click="select(index)"
         :key="option + index"
         :class="[
-          options ? 'item' : 'message',
+          processedOptions ? 'item' : 'message',
           { 'active selected': option === selected },
         ]"
       >
@@ -29,25 +41,51 @@
 export default {
   name: "Dropdown",
 
-  props: ["options", "selected", "disabled"],
+  props: ["options", "selected", "disabled", "search"],
 
   computed: {
     processedOptions: function () {
-      return this.options.map((el) =>
+      let options = this.options.map((el) =>
         el.constructor == Object ? el.name : el
       );
+      if (this.search && this.input !== "") {
+        options = this.searchOptions(options);
+      }
+      return options.length > 0 ? options : null;
     },
   },
 
   data() {
     return {
       isOpen: false,
+      input: "",
     };
   },
   methods: {
+    toggleDropdown(){
+      this.isOpen = !this.isOpen
+    },
     select(index) {
+      this.input = "";
+      this.isOpen = false; // * ne marche pas, car toggle dropdown est rappelé au même moment :-(
       this.$emit("update:selection", this.options[index]);
     },
+    searchOptions(options) {
+      return options.filter((el) =>
+        el.toLowerCase().includes(this.input.toLowerCase())
+      );
+    },
+    clear() {
+      this.input = "";
+      this.clearSelected();
+    },
+    clearSelected() {
+      this.$emit("update:selection", "");
+    },
+    handelInput() {
+      this.isOpen = true;
+      this.clearSelected();
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/store/modules/feature.js b/src/store/modules/feature.js
index a3d8c101edc3a6e885442fe422163cab018988dc..020ba7ffa4fb631f8e0ca1e4d72c15ce8a5ed1c2 100644
--- a/src/store/modules/feature.js
+++ b/src/store/modules/feature.js
@@ -41,6 +41,18 @@ const feature = {
           is_editable: true,
         }
       },
+      {
+        status: "published",
+        title: "Zac",
+        description: "Feature published",
+        created_on: "18/08/2021",
+        display_creator: "Winnie l'ourson",
+        feature_type: {
+          geom_type: "polygon",
+          title: "Zone de zonage",
+          is_editable: true,
+        }
+      },
       {
         status: "draft",
         title: "Éolienne terrestre",
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 81832cd614f0379cc3d0f79f0c59756d2824092c..8f18b18c2c7c94c7d6e1fa16f359cb30398823c5 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -80,6 +80,7 @@
           :options="form.type.choices"
           :selected="form.type.selected"
           :selection.sync="form.type.selected"
+          :search="true"
         />
       </div>
       <div class="field wide four column">
@@ -88,6 +89,7 @@
           :options="form.status.choices"
           :selected="form.status.selected.name"
           :selection.sync="form.status.selected"
+          :search="true"
         />
       </div>
       <div class="field wide four column">
@@ -188,6 +190,7 @@
               {{ feature.display_creator }}
             </td>
           </tr>
+          <tr v-if="filteredFeatures.length === 0" class="odd"><td colspan="5" class="dataTables_empty" valign="top">Aucune donnée disponible</td></tr>
         </tbody>
       </table>
     </div>
@@ -219,7 +222,7 @@ export default {
         status: {
           selected: {
             name: null,
-            value: null
+            value: null,
           },
           choices: [
             {
@@ -251,7 +254,23 @@ export default {
     ...mapState("feature", ["features"]),
     ...mapState("feature_type", ["feature_types"]),
     filteredFeatures: function () {
-      return this.features.filter((el) => el.status === this.form.status.value);
+      let results = this.features;
+      if (this.form.type.selected) {
+        results = results.filter(
+          (el) => el.feature_type.title === this.form.type.selected
+        );
+      }
+      if (this.form.status.selected.value) {
+        results = results.filter(
+          (el) => el.status === this.form.status.selected.value
+        );
+      }
+      if (this.form.title) {
+        results = results.filter((el) =>
+          el.title.toLowerCase().includes(this.form.title.toLowerCase())
+        );
+      }
+      return results;
     },
   },