.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');
}
})
}
const list = new Map([
['rating', 'По популярности'],
['price', 'По цене'],
['title', 'По названию'],
]);
const onClickSort = (item) => {
setSelectedSort(list.get(filter[0]));
setOpenPopup(false);
}
onClickSort('rating');
{[...list].map(item => (
<li
key={i}
onClick={() => onClickSort(item[0])}
className={selectedSort === i ? 'activeSort' : ''}
>
{value}
</li>
))}
export class CallController {
private _calls?: QueryModel;
constructor(router: IRouter, route_name: string) {
this.init().then(_ => {
this.handle_http_methods_for_route(router, route_name);
});
}
public async post(req: Request, res: Response, next: NextFunction): Promise<void> {
if(req.body) {
console.log(this._calls);
const call = await this._calls?.collection.findOne({type: req.body.type, members: {$in: req.body.members}});
if(!call) {
await this._calls?.collection.insertOne(req.body);
return;
}
await this._calls?.collection.updateOne({id: req.body.id}, {time: req.body.time, expert: req.body.expert});
}
}
private handle_http_methods_for_route(router: IRouter, route_name: string) {
router.route(route_name).post(this.post.bind(this));
}
async init(): Promise<void> {
this._calls = await query('calls');
}
}
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');
}
export class CompoundStringComponent extends FormGeneratorWidgetMixinComponent {
public compoundStringControl: FormGroup;
constructor() {
this.compoundStringControl = new FormGroup(
{
val1: new FormControl('', [
Validators.required
]),
val2: new FormControl('', [
Validators.required
])
}
);
}
public compound_form_values(form: FormGroup): string {
return Object.keys(form.value).map(key => form[key].value).join('');
}
}