LWC c текстовым инпутом с активными подсказками

Думаю, что таких кастомных решений множество, и возможно у вас есть какие то варианты на примете.

помните как работает стандартный лук-ап инпут? ты вводишь что-то в поле, и внизу всплывают подсказки-варианты.

вот нужно такое же, но к примеру для текстового поля. То есть в LWC есть текстовый инпут с лейблом Last Name, и когда пользователь что-то вводит, внизу появляются подсказки из уже существующих фамилий на контакт записях.

при этом эти подсказки не обязательно должны быть selectable.

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

спасибо

Den Brown

Думаю, что таких кастомных решений множество, и возможно  у вас есть какие то варианты на примете.

помните как работает стандартный лук-ап инпут? ты вводишь что-то в поле, и внизу всплывают подсказки-варианты.

вот нужно такое же, но к примеру для текстового поля. То есть в LWC есть текстовый инпут с лейблом Last Name, и когда пользователь что-то вводит, внизу появляются подсказки из уже существующих фамилий на контакт записях.

при этом эти подсказки не обязательно должны быть selectable.

так же не путайте активный поиск, когда юзер что-то вводит, а внизу активно фильтруется/выводится какая-то таблица записей. В данном случае нужны просто "подсказки".

спасибо

Den Brown

Думаю, что таких кастомных решений множество, и возможно у вас есть какие то варианты на примете.
помните как работает стандартный лук-ап инпут? ты вводишь что-то в поле, и внизу всплывают подсказки-варианты.
вот нужно такое же, но к примеру для текстового поля. То есть в LWC есть текстовый инпут с лейблом Last Name, и когда пользователь что-то вводит, внизу появляются подсказки из уже существующих фамилий на контакт записях.
при этом эти подсказки не обязательно должны быть selectable.
так же не путайте активный поиск, когда юзер что-то вводит, а внизу активно фильтруется/выводится какая-то таблица записей. В данном случае нужны просто "подсказки".
спасибо

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

а то я прочитал половину и подумал про фильтрацию и список опшенов к выбору, а потом прочитал в конце что ты не про это)

Maxim Elets

[quote="Den Brown"]Думаю, что таких кастомных решений множество, и возможно у вас есть какие то варианты на примете.
помните как работает стандартный лук-ап инпут? ты вводишь что-то в поле, и внизу всплывают подсказки-варианты.
вот нужно такое же, но к примеру для текстового поля. То есть в LWC есть текстовый инпут с лейблом Last Name, и когда пользователь что-то вводит, внизу появляются подсказки из уже существующих фамилий на контакт записях.
при этом эти подсказки не обязательно должны быть selectable.
так же не путайте активный поиск, когда юзер что-то вводит, а внизу активно фильтруется/выводится какая-то таблица записей. В данном случае нужны просто "подсказки".
спасибо[/quote]
а можешь картинку прикрепить, чтобы стало понятней?
а то я прочитал половину и подумал про фильтрацию и список опшенов к выбору, а потом прочитал в конце что ты не про это)

Maxim Elets

подумал про ... список опшенов к выбору

правильно подумал

я имел ввиду, что не такой вариант как например здесь:
https://trailhead.salesforce.com/content/learn/projects/lwc-build-flexible-apps/composition

где юзер вводит имя медведя, и перегружается вся таблица (тайлы) медведей.

Den Brown

[quote="Maxim Elets"]подумал про ... список опшенов к выбору[/quote]

правильно подумал

я имел ввиду, что не такой вариант как например здесь:
https://trailhead.salesforce.com/content/learn/projects/lwc-build-flexible-apps/composition

где юзер вводит имя медведя, и перегружается вся таблица (тайлы) медведей.

Теперь ты меня окончательно запутал... У тебя есть инпут, ты в него что-то вводишь, и согласно введеного текста у тебя что-то где-то фильтруется и показывается?

Если я прав, то

<lightning-input type="search"
					onchange={handleSearchTermChange}
					variant="label-hidden"
					class="slds-var-m-bottom_small"
					label="Search"
					placeholder="Search for bears"
					value={searchTerm}>
				</lightning-input>

handleSearchTermChange - метод который фильтрует что-то и перерисовывает. В нем ты можешь через event.target.value получить введенное значение

wilder

Теперь ты меня окончательно запутал... У тебя есть инпут, ты в него что-то  вводишь, и согласно введеного текста у тебя что-то где-то фильтруется и показывается?

Если я прав,  то

[code]<lightning-input type="search"
					onchange={handleSearchTermChange}
					variant="label-hidden"
					class="slds-var-m-bottom_small"
					label="Search"
					placeholder="Search for bears"
					value={searchTerm}>
				</lightning-input>[/code]

handleSearchTermChange - метод который фильтрует что-то и перерисовывает. В нем ты можешь через event.target.value получить введенное значение

я имел ввиду вот такой вариант:
https://newstechnologystuff.com/2019/05/01/custom-lookup-in-lightning-web-components/

или вот такой:
https://getoncrm.com/how-to-create-re-usable-and-lookup-dropdown-lightning-web-components/

вот здесь мультиселект версия:
https://newstechnologystuff.com/2019/08/25/lightning-web-components-multi-select-custom-lookup/

PS:
Эх, еще б они были accessible, допиливать придется

Den Brown

я имел ввиду вот такой вариант:
https://newstechnologystuff.com/2019/05/01/custom-lookup-in-lightning-web-components/

или вот такой:
https://getoncrm.com/how-to-create-re-usable-and-lookup-dropdown-lightning-web-components/

вот здесь мультиселект версия:
https://newstechnologystuff.com/2019/08/25/lightning-web-components-multi-select-custom-lookup/

PS:
Эх, еще б они были [i][b]accessible[/b][/i], допиливать придется