Блог

Сначала я начинаю эту тему с предупреждения о том, что, к сожалению, я не могу делать запросы для этого метода. Это работает следующим образом:

Когда пользователь обращается к странице, создается запрос и сохраняется в хранилище сеансов, из хранилища сеансов, который я должен искать с помощью фильтра.

После завершения поиска в хранилище сеансов по словам, которые относятся к введенным символам, я отображаю в HTML все найденные слова.

Я использую некоторые методы ES6, но когда я добавляю некоторые непреднамеренные символы, такие как, например:

1) Разное «…» 2) Различные пробелы

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

Как должен работать этот компонент? Пользователь введет некоторые символы во ввод, и над символом начнется поиск по этому «слову» ..

Поиск выполняется в хранилище сеанса, где содержится более 4k данных.

 abstract class FilterController {
    protected readonly _storageKey: string;
    protected readonly _typingValue: HTMLInputElement;
    protected readonly _bodyContainer: HTMLElement;
    protected readonly _listboxMain: HTMLElement;
    protected readonly _listboxSecondary: HTMLElement;

    constructor(storageKey: string, typingValue: HTMLInputElement, bodyContainer: HTMLElement, listboxMain: HTMLElement, listboxSecondary: HTMLElement){
        this._storageKey = storageKey;
        this._typingValue = typingValue;
        this._bodyContainer = bodyContainer;
        this._listboxMain = listboxMain;
        this._listboxSecondary = listboxSecondary;
    }

    protected get typedValue(): any {
        return this._typingValue.value;
    }

    protected get storageData(): any {
        return this.convertToJSON(sessionStorage.getItem(this._storageKey));
    }

    protected convertToJSON(_data: any): JSON {
        if (_data) {
            return JSON.parse(_data);
        }
    }

    protected blockFirstWhiteSpace(_event: KeyboardEvent): void {
        if (this.typedValue.length === 0 amp;amp; _event.code == 'Space') {
            _event.preventDefault();
        }
    }

    protected blockFirstPoint(_event: KeyboardEvent): void {
        if (this.typedValue.length === 1 amp;amp; _event.code == 'Period') {
            _event.preventDefault();
        }
    }

}

export default class FilterData extends FilterController {
    private _dataFound: any;

    constructor(storageKey: string, typingValue: HTMLInputElement, containerMain: HTMLElement, listboxMain: HTMLElement, listboxSecondary: HTMLElement) {
        super(storageKey, typingValue, containerMain, listboxMain, listboxSecondary);
    }

    private set dataFound(_data: any) {
        this._dataFound = _data;
    }

    private get dataFound(): any {
        return this._dataFound;
    }

    public initComponent() :void {
        this._typingValue.addEventListener('keypress', (_event: KeyboardEvent) => {
            this.blockFirstWhiteSpace(_event);
            this.blockFirstPoint(_event);
        });

        this._typingValue.addEventListener('keyup', (_event: KeyboardEvent) => {
            if (this.typedValue.length >= 2) {
                this.search();
            }
        });
    }

    private search(): void {
        if (this.storageData) {
            if (this.typedValue.length === 2) {
                this.filterDataIndex();
            } else if (this.typedValue.length > 2) {
                setTimeout(() => {
                    this.filterData();
                }, 50);
            }
        }
    }

    private filterData(): void {
        this.dataFound = this.storageData.filter((_value: any) => {
            let storageItemIndex = _value.search(this.typedValue.toUpperCase());
            if (storageItemIndex !== -1) {
                return this.storageData[storageItemIndex];
            }
        });
    }

    private filterDataIndex(): void {
        let storageItemIndex = this.storageData.indexOf(this.typedValue.toUpperCase());
        if (storageItemIndex !== -1) {
            this.dataFound = this.storageData[storageItemIndex];
        }
    }


}