FROM node:16
WORKDIR /usr/src/app
COPY ./package*.json ./
COPY ./lerna.json ./
RUN npm install
WORKDIR /usr/src/app/packages/backend
COPY ./packages/backend ./
RUN npm install
WORKDIR /usr/src/app/packages/frontend
COPY ./packages/frontend ./
RUN npm install --legacy-peer-deps
WORKDIR /usr/src/app/packages/static_hoster
COPY ./packages/static_hoster ./
RUN npm install
WORKDIR /usr/src/app
RUN npm run build
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
.active {
color: red;
}
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
document.onkeydown = (e) => {
document.querySelectorAll('div').forEach(el => {
if(el.textContent === e.key.toLowerCase()) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
})
}
Array.from - по дефолту querySelectorAll возвращает nodeList (к нему можно применить только forEach для пробега), а нам нужен массив чтобы получить доступ к методам массивов, в данном случае find.
Find - пробегается по массиву и возвращает undefined или первый найденный элемент
v - текущий элемент, v.textContent - v это объект у которого есть textContent поле.
mass[i] если mass объект, достаёт значение поля по ключу, если mass массив достаёт элемент по индексу.
v.textContent == mass[i] сравнивает на соответствие, условие которое передано в find, вернуться все элементы к которым подошло условие (вернуло true).
let res = Array.from(elems).find(v => v.textContent == mass[i]);
input - класс s-input . dropdown - класс dropdown. box - класс s-box
<div class="s-box">
<input type="text" id="input" autocomplete="off" class="s-input">
<input type="text" id="????" autocomplete="off" class="????">
<input type="submit" class="s-btn" value="Найти">
<ul class="dropdown" id="dropdown"></ul>
</div>
function box_listener(box){
const input = box.querySelector('.s-input');
const dropdown = box.querySelector('.dropdown');
if (input.value === '') dropdown.style.display = 'none';
const fetch_data = _ => {
$.post("files/auto_complet.php", { s: input.value }, (data, status) => {
if (data != "not found") {
dropdown.style.display = 'block';
dropdown.innerHTML = data;
box.querySelectorAll('.dropdown li').forEach(item => {
item.onclick = () => e.target.value = item.innerText;
});
}
});
}
input.oninput = fetch_data;
input.onclick = fetch_data;
}
document.querySelectorAll('.s-box').forEach(box => {
box_listener(box);
});
document.body.onclick = e => {
document.querySelectorAll('.dropdown').forEach(el => el.style.display = 'none');
}