Ajax Live search using custom filter in vuejs component

Ajax Live search using custom filter in vuejs component

In this Post We Will Explain About is Ajax Live search using custom filter in vuejs component With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Ajax Live Search Using Vue and Node Example

In this post we will show you Best way to implement Live search using custom filter in Vue Js, hear for List search filter using VueJS – jQuery Ajax PHP with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Getting Started for Vue js Live Search

We have used CDN(libes) for Vuejs so you must need Your internet Data connection for them to work on Full Text Search in VueJS Example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Full Text Search in VueJS Example) dependencies and the HTML Elements that we have created.

Also Read :   AngularJS json array object string parse Example

<div id="liveApp">
  <div class="search-cdBox">
    <input type="text" v-model="search" placeholder="Live Search title.."/>
        <label>Vuejs Search title:</label>
  </div>
  <div class="cdBox">
    <div class="card" v-for="article in livevArticleFilter">
      <a v-bind:href="article.link" target="_blank">
        <img v-bind:src="article.img"/>
        <small>posted by: {{ article.author }}</small>
        {{ article.title }}
      </a>
    </div>
  </div>
</div>

index.js

This contains our simple custom index.js files Add Like as javascript, vuejs scripts

class Article {
  constructor(title, link, author, img) {
    this.title = title;
    this.link = link;
    this.author = author;
    this.img = img;
  }
}

const liveApp = new Vue ({
  el: '#liveApp',
  data: {
    search: '',
    articleList : [
      new Article(
        'User Registration Form Example in VueJS', 
        'http://live24u.com/user-registration-form-example-in-vuejs/', 
        'jd patel', 
        'http://live24u.com/user-registration-form-example-in-vuejs/'
      ),
      new Article(
        'Simple VueJs Bootstrap Modal Form Example', 
        'http://live24u.com/simple-vuejs-bootstrap-modal-form-example/', 
        'Ankit kathiriya',
        'http://live24u.com/simple-vuejs-bootstrap-modal-form-example/'
      ),
      new Article(
        'Radio buttons with VueJS Example', 
        'http://live24u.com/radio-buttons-with-vuejs-example/', 
        'Krunal thakkar', 
        'http://live24u.com/radio-buttons-with-vuejs-example/'
      ),
      new Article(
        'Simple Image Slider Using VueJS', 
        'http://live24u.com/simple-image-slider-using-vuejs/', 
        'Dhavel dave',
        'http://live24u.com/simple-image-slider-using-vuejs/'
      ),
      new Article(
        'Simple calculator using VueJS and CSS3', 
        'http://live24u.com/simple-calculator-using-vuejs-and-css3/', 
        'Narendra bhai Modi', 
        'http://live24u.com/simple-calculator-using-vuejs-and-css3/'
      ),
      new Article(
        'Ajax Http with VueJS and PHP', 
        'http://live24u.com/ajax-http-with-vuejs-and-php/', 
        'Virat Kohali',
        'http://live24u.com/ajax-http-with-vuejs-and-php/'
      ),
      new Article(
        'Ajax File Upload using VueJS Example', 
        'http://live24u.com/ajax-file-upload-using-vuejs-example/', 
        'Chirag dethariya',
        'http://live24u.com/ajax-file-upload-using-vuejs-example/'
      ),
      new Article(
        'Redirect page after delay using VueJS', 
        'http://live24u.com/redirect-page-after-delay-using-vuejs/', 
        'Sivani kalariya', 
        'http://live24u.com/redirect-page-after-delay-using-vuejs/'
      ),
      new Article(
        'VueJS How to Create Routes', 
        'http://live24u.com/vuejs-how-to-create-routes/', 
        'Hitesh C Ajmera',
        'http://live24u.com/vuejs-how-to-create-routes/'
      ),
]
  },
  computed: {
    livevArticleFilter() {
      return this.articleList.filter(article => {
        return article.title.toLowerCase().includes(this.search.toLowerCase())
      })
    }
  }
})

style.css

Last step, we have add the Following CSS styles for our simple and our Custom styling.

Also Read :   Simple Tab Controls in AngularJS Example


div#liveApp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  
  .search-cdBox {
    position: relative;
    label {
      position: absolute;
      font-size: 14px;
      color: rgba(0,0,0,.50);
      top: 8px;
      left: 14px;
      z-index: -1;
      transition: .15s all ease-in-out;
    }
    input {
      padding: 5px 14px;
      color: rgba(0,0,0,.70);
      border: 1px solid rgba(0,0,0,.12);
      transition: .15s all ease-in-out;
      background: white;
      &:focus {
        outline: none;
        transform: scale(1.05);
        & + label  {
          font-size: 11px;
          transform: translateY(-25px) translateX(-14px);
        }
      }
      &::-webkit-input-placeholder {
          font-size: 14px;
          color: rgba(0,0,0,.50);
          font-weight: 100;
      }
    }
  }

  .cdBox {
    display: flex;
    max-width: 500px;
    flex-wrap: wrap;
    padding-top: 14px;
  }

  .card {
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 5px;
    max-width: 124px;
    margin: 14px;
    transition: .15s all ease-in-out;
    &:hover {
      transform: scale(1.1);
    }
    a {
      text-decoration: none;
      padding: 14px;
      color: #3d3d3d;
      font-size: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        height: 150px;
      }
      small {
        font-size: 11px;
        padding: 5px;
      }
    }
  }
  .hotpink {
    background: hotpink;
  }

  .green {
    background: green;
  }

  .box {
    width: 150px;
    height: 150px;
    border: 1px solid rgba(0,0,0,.12);
  }
}

Live Search Using Vue Js

Also Read :   AngularJS Built in Functions with Example

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Live search using custom filter in Vue Js And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.