Как сделать поиск в своём расширении для Yandex Browser

Web
#1

Здорова, допустим у меня есть расширение, где можно добавлять музыку, и её можно листать вниз, вверх, но её настолько много что мне нужен поиск, можете скинуть хотя бы пример кода, как такое сделать (тобишь чтоб в расширении была строка поиска, ты вписуешь туда слово, и оно производит поиск только по расширения, и чтобы перемещало скрол к последнему найденному совпадению)

#2

Что за расширение, как там музыка хранится?

1 лайк
#3

ой не музыка, а аккаунты, они через куки храняться

#4

А в каком виде хранятся?

У кук не особо большой макс. размер же, вроде 4096 байтов.

1 лайк
#5

ну через логи браузера, тобишь в самой папке расширения аккаунтов нету

#6

слушай, можем пойти в дс? я тебе покажу всё, и скину если нужно

#7

Бред какой-то, лог это список действий, событий, типа

[2021-04-25 10:00:00] Программа запущена.
[2021-04-25 10:00:08] Произошла ошибка: FooBarException.

Но вообще непонятно в чем проблема, если список сделали, то и поле для ввода сможете сделать.

Ну а дальше просто обрабатывать событие изменения текста в поле ввода, фильтровать список, выводить.

const accounts = [
  { name: 'Ivan' },
  { name: 'Ivanka' },
  { name: 'Van Helsing' },
  { name: 'John' },
]

const searchInput = 'van'.toLowerCase()

const filteredAccounts = accounts.filter(acc => acc.name.toLowerCase().includes(searchInput))
1 лайк
#8

это получается в файл popup.html нужно сделать само меня поиска, а потом сделать отдельный файл с самим кодом поиска?

#9

Да как угодно, в соответствии с уже существующим кодом.

1 лайк
#10

а в это коде что добавлять? просто я чайник чайный

#11

Ну это просто пример фильтрации массива по определенному полю объектов.

accounts это массив всех аккаунтов.

filteredAccounts — результат, который надо вывести, так же как выводится и без поиска (чтоб не дублировать код вывода естественно лучше выделить это в какую-нибудь функцию showAccounts(accounts) и вызывать её и при изначальном выводе, и после поиска).

Поиск можно вызывать например в обработчике события input поля ввода
HTMLElement: input event - Web APIs | MDN

Кто мешает стать не чайником? https://learn.javascript.ru

1 лайк
#12

image
image326×603 46 KB
вот что у меня получилось, а какой код чтоб оно производило поиск, помоги пожалуйста

#13

Ну так а вывод списка вы как сделали? Это выглядит намного сложнее поиска )
Или если не вы делали, то либо обратиться к тому, кто делал, либо изучать самому.

Примитивный пример на основе моего кода выше может быть таким:

Search <input id="search">

<div id="accountsList">
</div>

function showAccounts(accounts) {
  const html = '<ul>' + accounts.map(acc => `<li>${acc.name}</li>`).join('') + '</ul>'
  document.querySelector('#accountsList').innerHTML = html;
}

function search(accounts, searchInput) {
  const filteredAccounts = accounts.filter(acc => acc.name.toLowerCase().includes(searchInput))
  showAccounts(filteredAccounts)
}

const accounts = [
  { name: 'Ivan' },
  { name: 'Ivanka' },
  { name: 'Van Helsing' },
  { name: 'John' },
]

showAccounts(accounts)

const searchBox = document.querySelector('#search')
searchBox.addEventListener('input', () => search(accounts, searchBox.value.toLowerCase()))

https://jsfiddle.net/AlexP11223/avep13f2/16/

2 лайка
#14

слушай классная штука, а как сделать, чтоб полный список не показывался, только когда вводишь в поиск то только тогда выводилось?

#15

Убрать

1 лайк
#16

когда убрал эту строку, работает нормально, но когда что-то пишешь в поиск и удаляешь, весь список снова появляется

#17

А зачем не показывать весь список?)

1 лайк
#19

просто аккаунтов много, и когда весь список показуется сразу, то это очень не удобно, лучше чтоб показывались только результаты запроса, можешь помочь с этим?

#20

Ну так а скрывать его какой смысл? Есть поиск, можно им пользоваться, никто ж не заставляет пользоваться полным списком если он не нужен )

1 лайк
#21

ну просто чтоб не показывался весь список, а только конечный результат, можно так сделать?