How to display search result only while typing using vue js for search

user_8235983 0
Viewed 2953

Am creating a search filter using vue js, my current problem is, i want to display datas from recentSearch history when the page created or instead of showing all json data from recentSearch, then when i start typing it will retrieve filter data from searchProduct

My json format in searchProduct.php

{"result" : [
    { product_name: 'mike', business_name: 'student' },
    { product_name: 'beckham john', business_name: 'footballer' },
    { product_name: 'walcott', business_name: 'footballer' },
    { product_name: 'cech', business_name: 'footballer' },
    { product_name: 'jordan', business_name: 'actor' },
    { product_name: 'tom', business_name: 'actor' },
    { product_name: 'john', business_name: 'actor' }
],
"recent" : [
    { product_name: 'mike', business_name: 'student' },
    { product_name: 'beckham john', business_name: 'footballer' },
    { product_name: 'walcott', business_name: 'footballer' }
]}

Html example

<div id="SearchVueContenPage">
<input type="search" v-model="q" name="q"/>
    <ul>
        <li v-for="row in filterSearchs" >{{row.product_name}}</li>
    </ul>
</div>

Here is my javascript 

const appSearch = new Vue({
    el: "#SearchVueContenPage",
     data() {
        return {
            searchProduct: [], /*show this item only for search*/
            recentSearch: [], /*show this when page load or not searching*/
            q: ''
        }
      },
       methods: {

       },
        created() {
            fetch(ajax_appserver("public", "_api/searchProduct.php?fetch_api=true&getFromApp=vue&search="))
            .then(response => response.json())
            .then(json => {
                this.searchProduct = json.result;
                this.recentSearch = json.recent.slice(0, 3);
            });
        },
        computed: {
            filterSearchs: function(){
                return this.searchProduct.filter((row) => {
                    var query = this.q.toLowerCase();
                    return row.product_name.toLowerCase().indexOf(query)>-1 || row.business_name.toLowerCase().indexOf(query)>-1;
                });
            }
    }

});
vue.js filter javascript
1 Answers

You can use filter in a computed property to return only the items matching the search query with a conditional statement to test if anything has been entered in the search box and if not, return the recent search results.

const data = {
  "result": [{
      product_name: 'mike',
      business_name: 'student'
    },
    {
      product_name: 'beckham john',
      business_name: 'footballer'
    },
    {
      product_name: 'walcott',
      business_name: 'footballer'
    },
    {
      product_name: 'cech',
      business_name: 'footballer'
    },
    {
      product_name: 'jordan',
      business_name: 'actor'
    },
    {
      product_name: 'tom',
      business_name: 'actor'
    },
    {
      product_name: 'john',
      business_name: 'actor'
    }
  ],
  "recent": [{
      product_name: 'mike',
      business_name: 'student'
    },
    {
      product_name: 'beckham john',
      business_name: 'footballer'
    },
    {
      product_name: 'walcott',
      business_name: 'footballer'
    }
  ]
}


new Vue({
  el: '#app',
  data() {
    return {
      filter: '',
      items: null,
      loading: false
    }
  },
  computed: {
    search() {
      if (!this.items) {
        return []
      }

      if (!this.filter) {
        return this.items.recent
      }

      return this.items.result.filter(item => item.product_name.includes(this.filter) || item.business_name.includes(this.filter))
    }
  },
  mounted() {
    this.loading = true
    this.fetchData().then(() => {
      this.loading = false
    })
  },
  methods: {
    async fetchData() {
      // here will simulate an ansynchronous call using fetch
      //
      // an actual fetch call will look something like the following: 
      //
      // this.items = await fetch('/path/to/api').then(res => res.json()).then(json => json)
      
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          this.items = data
          resolve()
        }, 3000)
      })
    }
  },
  template: `
  <div id="wrapper">
    <label>Search</label>
    <input v-model="filter">
    <h4 v-if="loading" class="loading">Loading</h4>
    <h4 v-else>{{ !!filter ? 'Search Results' : 'Recent Search' }}</h4>
    <ul>
      <li v-for="(item, index) in search" :key="index">
        <p>Product Name: {{ item.product_name }}</p>
        <p>Business Name: {{ item.business_name }}</p>
      </li>
    </ul>
  </div>
  `
})
#wrapper {
  padding: 1rem 5rem;
  display: flex;
  flex-direction: column;
  background-color: rgba(179,229,252,1);
  
}

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: black;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 white;}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

user_95561930
Related