Как мне добавить поисковое поле в клон социальной сети?

Question

[Abraham Chanski]

Хочу добавить в свой клон возможность поиска других зарегистрировашихся людей, как в социальных сетях, вводишь допустим "Eli" и он показывает всех пользователей, у которых имя/фамилия начинается с этих букх, либо полность выводит, если полностью написать.

Зарегистрировавшиеся пользователи находятся в Realtime database в firebase (естественно регистрация email/password включена.) Ниже скрин.


Как мне теперь осуществить эту возможность?

Вот компонент из которого мне нужно сделать "поисковик"

<template>
  <div class="search">
    <input type="search" placeholder="Search Twitter" v-model="search" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
    };
  },
  methods: {

  },
};
</script>

Comments

[Вадим]

У Вас должен быть компонент, в который будете выводить результат.
По факту ввода текста в поле поиска(по событию input) с некоторым дебаунсом нужно отправлять запрос на бэк, а ответ отрисовывать в компоненте вывода.

[Abraham Chanski]

Вадим, отдельный компонент я хотел позже создать, а сначала реализовать ту штуку, которая в реальном времени выводит список пользователей с таким же ником. Как на скрине.


То есть, я ввел в поиск Tru и даже Enter не нажал, а он уже выдал пользователей с похожими именами.

Так вот, вопрос в том, как мне реализовать эту возможность?

[Вадим]

Abraham Chanski, именно такой алгоритм я Вам и описал. Событие input, debounce, запрос, отрисовка