Property Search Controll

src/components/property/propertySearchPage.vue

       <br />
       <div class="row">
         <div class="col-md-2 offset-4">
-          <button type="button" @click="SetType('Residential')" class="btn btn-b-n">Residential</button>
+          <button type="button" @click="SetType('Residential')" class="btn btn-b-n">
+            Residential
+          </button>
         </div>
         <div class="col-md-2">
-          <button type="button" @click="SetType('Commercial')" class="btn btn-b-n">Commercial</button>
+          <button type="button" @click="SetType('Commercial')" class="btn btn-b-n">
+            Commercial
+          </button>
         </div>
       </div>
       <br />
               aria-controls="pills-video"
               aria-selected="true"
               v-on:click="SetSalesType('Sale')"
-            >For Sale</a>
+              >For Sale</a
+            >
           </li>
           <li class="nav-item">
             <a
               aria-controls="pills-plans"
               aria-selected="false"
               v-on:click="SetSalesType('Rent')"
-            >To Rent</a>
+              >To Rent</a
+            >
           </li>
         </ul>
       </div>
       <br />
+      <div class="row">
+        <autoComplete class="col-md-11 offset-1" :items="suburbList" @selection="SelectedFilter" />
+      </div>
+      <br />
       <div class="row">
         <div class="col-md-10 offset-1">
-          <div class="input-group-prepend">
-            <span class="input-group-text" style="color: #60CBEB">
-              <b v-if="salesType === 'Sale'">S</b>
-              <b v-else>R</b>
-            </span>
-            <select class="form-control browser-default custom-select" v-model="searchText">
-              <option value="0">Please select</option>
-              <option v-for="item in suburbs" :value="item.id" :key="item.id">{{item.display}}</option>
-            </select>
-            <button
-              type="button"
-              class="input-group-text fa fa-search"
-              style="color: #60CBEB"
-              @click="SearchClick"
-            ></button>
-          </div>
+          <button
+            type="button"
+            class="input-group-text fa fa-search"
+            style="color: #60CBEB"
+            @click="SearchClick"
+          >
+            Search
+          </button>
         </div>
       </div>
       <div class="row">
         <div class="col-md-12">
-          <h1 class="my-4" v-if="propertyUsageType === 'Residential'">About Residential Properties</h1>
+          <h1 class="my-4" v-if="propertyUsageType === 'Residential'">
+            About Residential Properties
+          </h1>
           <h1 class="my-4" v-else>About Commercial Properties</h1>
         </div>
         <div class="container col-md-6 text-left" v-if="propertyUsageType === 'Residential'">
           <p>
-            Uni-Vate Properties understands the necessity in property-seekers
-            to find that perfect fit;
-            a home that meets, and exceeds the individual's needs. That is why,
-            our dedicated team sources
-            a range of property types, whether that home is a rental option near
-            a University for a student
-            just starting out, or a family home fit for entertaining.
+            Uni-Vate Properties understands the necessity in property-seekers to find that perfect
+            fit; a home that meets, and exceeds the individual's needs. That is why, our dedicated
+            team sources a range of property types, whether that home is a rental option near a
+            University for a student just starting out, or a family home fit for entertaining.
           </p>
           <p>
-            Looking to sell your residential property, instead? Uni-Vate
-            Properties prides itself on
-            professionalism and the right expertise, to help you secure the
-            best possible deal for your home.
+            Looking to sell your residential property, instead? Uni-Vate Properties prides itself on
+            professionalism and the right expertise, to help you secure the best possible deal for
+            your home.
           </p>
           <p>
             Wish to RENT your property?
         </div>
         <div class="container col-md-6 text-left" v-else>
           <p>
-            Commercial properties are characteristically any larger properties that
-            generate profit through leasing or rental activities. These properties
-            are typically used to conduct business and provide companies with cut-and-dry
-            leasing agreements, which keep their involvement in the maintenance of the property
-            to a minimum, so they may focus on the growth of their company.
+            Commercial properties are characteristically any larger properties that generate profit
+            through leasing or rental activities. These properties are typically used to conduct
+            business and provide companies with cut-and-dry leasing agreements, which keep their
+            involvement in the maintenance of the property to a minimum, so they may focus on the
+            growth of their company.
           </p>
           <p>
             Uni-Vate Properties seeks out professional, clean spaces for such companies and acts as
             mediator between the landlord/-lady and the tenants. Uni-Vate Properties provides
-            value-adding service to clients and conducts business with a high standard
-            and integrity.
+            value-adding service to clients and conducts business with a high standard and
+            integrity.
           </p>
           <p>
             Wish to RENT your property?
 </template>
 <script>
 import { mapState, mapActions } from 'vuex';
+import autoComplete from '../shared/autoComplete.vue';
 
 export default {
   name: 'propertysearch',
+  components: {
+    autoComplete,
+  },
   data() {
     return {
       propertyUsageType: 'Residential',
       salesType: 'Sale',
       searchText: '',
-      options: ['bla', 'boo', 'buz'],
     };
   },
   computed: {
-    ...mapState('propertySearch', ['suburbs', 'propertySearch']),
+    ...mapState('propertySearch', ['suburbs', 'suburbList', 'propertySearch']),
   },
   methods: {
     ...mapActions('propertySearch', ['getSuburbs', 'applyFilter']),
       this.propertyUsageType = item;
     },
     SearchClick() {
-      const item = this.suburbs.find(s => s.id === this.searchText);
+      const item = this.suburbs.find(s => s.display === this.searchText);
       console.log(JSON.stringify(item));
       this.propertySearch.province = item.province;
       this.propertySearch.city = item.city;
     SetSalesType(value) {
       this.salesType = value;
     },
+    SelectedFilter(item) {
+      this.searchText = item;
+    },
   },
   mounted() {
     this.getSuburbs();

src/components/shared/autoComplete.vue

+<template>
+  <div class="autocomplete">
+    <input type="text" v-model="search" @input="onChange" class="form-control" />
+    <ul v-show="isOpen" class="autocomplete-results">
+      <li
+        v-for="(result, i) in results"
+        :key="i"
+        class="autocomplete-result"
+        @click="setResult(result)"
+      >
+        {{ result }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      search: '',
+      results: [],
+      isOpen: false,
+    };
+  },
+  methods: {
+    onChange() {
+      if (this.search.length >= 3) {
+        this.isOpen = true;
+        this.filterResults();
+      } else {
+        this.isOpen = false;
+      }
+    },
+    filterResults() {
+      this.results = this.items.filter(
+        item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1,
+      );
+    },
+    setResult(result) {
+      this.search = result;
+      this.isOpen = false;
+      this.$emit('selection', this.search);
+    },
+  },
+};
+</script>
+
+<style>
+.autocomplete {
+  position: relative;
+  width: 130px;
+}
+
+.autocomplete-results {
+  padding: 0;
+  margin: 0;
+  border: 1px solid #eeeeee;
+  height: 120px;
+  overflow: auto;
+}
+
+.autocomplete-result {
+  list-style: none;
+  text-align: left;
+  padding: 4px 2px;
+  cursor: pointer;
+}
+
+.autocomplete-result:hover {
+  background-color: #60cbeb;
+  color: white;
+}
+</style>

src/store/modules/property/propertySearch.js

     latestProperties: [],
     suburbs: [],
     searchText: '',
+    suburbList: [],
   },
   mutations: {
     updateSearch(state, propertySearch) {
       state.propertySearch[filter] = 'All';
     },
     setSuburbs(state, items) {
+      state.suburbList = [];
       state.suburbs = items;
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < state.suburbs.length; i++) {
+        state.suburbList.push(state.suburbs[i].display);
+      }
     },
     setFilter(state, value) {
       state.searchText = value;
       if (item.userName === '') {
         item.userName = 'Unknown';
       }
+      if (item.suburb === '') {
+        item.suburb = 'All';
+      }
+      if (item.city === '') {
+        item.city = 'All';
+      }
+      if (item.province === '') {
+        item.province = 'All';
+      }
       axios
         .get(
           `/api/Property/Search/${item.userName}/${item.keyword}/${item.salesType}/${item.propertyUsageType}/${item.propertyType}/${item.province}/${item.city}/${item.suburb}/${item.minPrice}/${item.maxPrice}`,