What are the steps to integrate live search functionality into VueJS applications?

Question

What are the steps to integrate live search functionality into VueJS applications?

I am looking to implement a real-time search feature on my Twitter clone in order to locate other registered users. These users are stored on the backend using Firebase.

The users are located on the backend, and here is an example of the search functionality that I want to achieve.

This is what I have attempted so far:

<script>
    export default {
      data() {
        return {
          search: "",
          users: ['Dummy', 'Users', 'From', 'Backend'],
        };
      },
      methods: {
        findUser(){
            const result = this.users.find(user => user.includes(this.search))
            console.log(result)
        },
      },
    };
    </script>

Can anyone point out what mistake I might be making?

javascript firebase vue.js

Answer 1

Answer №1

In my opinion, utilizing a computed property in this scenario would be more advantageous for observing the "real-time" changes and implementing a .filter to extract the filtered list that matches the search keyword:

new Vue({
  el:"#app",
  data() {
    return {
      search: "",
      users: ['Dummy', 'Users', 'From', 'Backend'],
    };
  },
  computed: {
    filteredUsers(){
      return this.users.filter(user =>
        user.toLowerCase().includes(this.search.toLowerCase())
      );
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="search"/>{{filteredUsers}}
</div>

Answer 2

In my opinion, utilizing a computed property in this scenario would be more advantageous for observing the "real-time" changes and implementing a .filter to extract the filtered list that matches the search keyword:

new Vue({
  el:"#app",
  data() {
    return {
      search: "",
      users: ['Dummy', 'Users', 'From', 'Backend'],
    };
  },
  computed: {
    filteredUsers(){
      return this.users.filter(user =>
        user.toLowerCase().includes(this.search.toLowerCase())
      );
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="search"/>{{filteredUsers}}
</div>

Answer 3

Answer №2

To perform real-time search using an API, consider utilizing WATCH functionality

This method can be implemented for sorting data on FIREBASE platform, more details can be found at https://firebase.google.com/docs/database/web/lists-of-data

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount')

The provided code snippet might have some discrepancies, but the core concept is communicated

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="search"/>{{filteredUsers}}
</div>

new Vue({
  el:"#app",
  data() {
    return {
      search: null, 
      users: []     
    };
  },
  computed: {
    filteredUsers(){
      return this.users.filter(user =>
        user.toLowerCase().includes(this.search.toLowerCase())
      );
    },  
  },
  watch: {
      watchUser(search) {
       if (search) {
       this.searchPerson()
      }
    },              
 },
 methods: {  
   searchPerson() {
        this.loading = true;
        this.fetchUsers()
          .then(res => {
            this.users = normalizeResponse(res)
            this.loading = false          
          })
      },
      fetchUsers() {
        return axios({
          method: 'get',
          url: '',
          params: {        
          },
          headers: {
            'Content-type': 'application/json'
          }
        });
      },
    }
 });

Answer 4

To perform real-time search using an API, consider utilizing WATCH functionality

This method can be implemented for sorting data on FIREBASE platform, more details can be found at https://firebase.google.com/docs/database/web/lists-of-data

var myUserId = firebase.auth().currentUser.uid;
var topUserPostsRef = firebase.database().ref('user-posts/' + myUserId).orderByChild('starCount')

The provided code snippet might have some discrepancies, but the core concept is communicated

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="search"/>{{filteredUsers}}
</div>

new Vue({
  el:"#app",
  data() {
    return {
      search: null, 
      users: []     
    };
  },
  computed: {
    filteredUsers(){
      return this.users.filter(user =>
        user.toLowerCase().includes(this.search.toLowerCase())
      );
    },  
  },
  watch: {
      watchUser(search) {
       if (search) {
       this.searchPerson()
      }
    },              
 },
 methods: {  
   searchPerson() {
        this.loading = true;
        this.fetchUsers()
          .then(res => {
            this.users = normalizeResponse(res)
            this.loading = false          
          })
      },
      fetchUsers() {
        return axios({
          method: 'get',
          url: '',
          params: {        
          },
          headers: {
            'Content-type': 'application/json'
          }
        });
      },
    }
 });

What are the steps to integrate live search functionality into VueJS applications?

Answer №1

Answer №2

Similar questions

guidelines for splitting content into A4 size pages automatically using Vue

The intricacies of converting AudioBuffers to ArrayBuffers

Issues with uploading files on iOS devices when using ReactJS

Eliminate Elements from Array - Angular Four

Wordpress causing Jquery to malfunction; PHP function not executing

The incompatible peer dependency of node.js is causing issues with running npm update

Leverage TypeScript Enum along with PropTypes to declare the properties of a React component

Display modal within a React list

Enabling a checkbox grid for exclusive rectangular selections

Error in custom class using vanilla JavaScript: "Error: Unable to assign innerHTML to an undefined property"

Generating Vuetify badges and icons with createElement in the render function: A step-by-step guide

How can I trigger a JavaScript function when the ENTER key is pressed?

Why is the button missing from the codepen?

What are the benefits of implementing a hexadecimal strategy in javascript?

Issues with Pageinit and Ready Event Timings

Autofill functions may not be compatible with input fields generated using JavaScript

Organizing controllers in separate files within AngularJS

Highlight the parent item when the child item is being hovered over

Can anyone recommend an HTML element that is capable of containing spans and supporting editable text within?

Creating a dynamic multidimensional array or object in AngularJS: tips and tricks