CODEWITHSUNDEEP
htmlajaxvue.js
Nightcrawler
Nightcrawler

Reputation: 1051

How to create autocomplete box using vue.js?

I am new at Vue, now I am creating simple search app (using Vue.js cdn).

I want to append suggestion bar which contains all user id's from fake JSON server, for example if I write into search bar 1, I want to append only user which id is 1, and then I click to that user id I want to send another request to receive only this user info.

I am stuck, how I can solve this?

var app = new Vue({
    el: '#app',
    data: {
        message: '',
        searchKey:'',
        result:[]
    },

    methods:{
        async getData() {
            // GET request using fetch with async/await
            const response = await fetch(`https://jsonplaceholder.typicode.com/users/${this.searchKey}`);
            const data = await response.json()
            this.result = data
          },
    },

    created(){
        this.getData()
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.js"></script>
<div id="app">
    <div class="search-area">
        <div class="header-wrapper">
            <h1>Tag Search</h1>
        </div>
        <div class="search-bar-custom">
            <input placeholder="Search tags" v-model="searchKey" @keyup="getData" />
            <div class="suggetions">
                <ul class="suggestions" id="suggestions">
                    <li><h1>suggetion id</h1></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 711

Answers (1)

oceangravity
oceangravity

Reputation: 152

You are on the right way, but, there are some issues about your logic here, for json-server you need to use the Operator _like (https://github.com/typicode/json-server#operators) to retrieve or filter data depending the column or property, so, your getData method must be like this:

    async getData() {
      // GET request using fetch with async/await
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users?name_like=${this.searchKey}`
      );
      const data = await response.json();
      this.result = data;
    },

You can change the property or column, in example username_like or id_like.

Finally, you need to show the results, so, change your template:

   <ul class="suggestions" id="suggestions">
     <h1 v-for="item in result" @mousedown="show(item)">
       {{ item.id }} | {{ item.name }}
     </h1>
   </ul>

Pay attention on @mousedown="show(item)", when user click on some result, this action will display the data about user, for that, we need to create a new method called show and pass the item:

  show(item) {
    alert(JSON.stringify(item, null, 2));
  }

You can look how it works here: https://codepen.io/riateam/pen/ExNrGOE?editors=1010

Upvotes: 1

Related Questions