search household in household mmebers editor

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -1,12 +1,12 @@
 <template>
-   <ul class="record_actions">
+    <ul class="record_actions">
       <li class="add-persons">
-         <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
-            @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
+        <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
+           @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
       </li>
-   </ul>
+    </ul>
 
-   <teleport to="body">
+  <teleport to="body">
       <modal v-if="modal.showModal"
          :modalDialogClass="modal.modalDialogClass"
          @close="modal.showModal = false">
@@ -181,7 +181,7 @@ export default {
       },
       hasPriorSuggestion() {
          return this.search.priorSuggestion.key ? true : false;
-      }
+      },
    },
    methods: {
       openModal() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -25,6 +25,11 @@
             v-if="item.result.type === 'user'"
             v-bind:item="item">
          </suggestion-user>
+
+        <suggestion-household
+            v-if="item.result.type === 'household'"
+            v-bind:item="item">
+        </suggestion-household>
       </label>
 
    </div>
@@ -34,6 +39,7 @@
 import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
 import SuggestionUser from './TypeUser';
+import SuggestionHousehold from './TypeHousehold';
 
 export default {
    name: 'PersonSuggestion',
@@ -41,6 +47,7 @@ export default {
       SuggestionPerson,
       SuggestionThirdParty,
       SuggestionUser,
+      SuggestionHousehold,
    },
    props: [
       'item',
@@ -70,7 +77,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
    div.results {
       div.list-item {
          padding: 0.4em 0.8em;
@@ -83,7 +90,7 @@ export default {
          label {
             display: inline-flex;
             width: 100%;
-            div.container {
+            div.container:not(.household) {
                & > input {
                   margin-right: 0.8em;
                }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeHousehold.vue

@@ -0,0 +1,27 @@
+<template>
+   <div class="container household">
+     <household-render-box :household="item.result" :isAddressMultiline="false"></household-render-box>
+   </div>
+
+   <div class="right_actions">
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
+   </div>
+</template>
+
+<script>
+
+import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
+
+export default {
+   name: 'SuggestionHousehold',
+   components: {
+     BadgeEntity,
+     HouseholdRenderBox,
+   },
+   props: ['item'],
+}
+</script>