ItemsTextMixin

Exposes the text content of a list's items as an array of strings

Overview

Purpose: exposes the text content of a list's items as an array of strings.

This mixin works toward the beginning of the Elix render pipeline:

events → setState → render DOM → post-render

Expects the component to provide:

Provides the component with:

  • [internal.state].texts state member containing an array of text strings corresponding to the text content of the current set of items.

Usage

import ItemsTextMixin from "elix/src/base/ItemsTextMixin.js";
import SlotItemsMixin from "elix/src/base/SlotItemsMixin.js";
class MyElement extends ItemsTextMixin(SlotItemsMixin(HTMLElement)) {}

Example

ItemsTextMixin is useful for components that want to search the text content of a list's items. The related KeyboardPrefixCursorMixin can use the [internal.state].texts member created by ItemsTextMixin to let the user select an item by typing its first few characters.

Acai
Akee
Apple
Apricot
Avocado
Banana
Bilberry
Black sapote
Blackberry
Blackcurrant
Blood orange
Blueberry
Boysenberry
Cantaloupe
Cherimoya
Cherry
Chico fruit
Clementine
Cloudberry
Coconut
Crab apple
Cranberry
Cucumber
Currant
Damson
Date
Dragonfruit
Durian
Elderberry
Feijoa
Fig
Goji berry
Gooseberry
Grape
Grapefruit
Guava
Honeyberry
Honeydew
Horned melon
Huckleberry
Jabuticaba
Jackfruit
Jambul
Japanese plum
Jostaberry
Jujube
Juniper berry
Kiwifruit
Kumquat
Lemon
Lime
Longan
Loquat
Lychee
Mandarin
Mango
Mangosteen
Marionberry
Miracle fruit
Mulberry
Nance
Nectarine
Orange
Papaya
Passionfruit
Peach
Pear
Persimmon
Pineapple
Pineberry
Plantain
Plum
Pluot
Pomegranate
Pomelo
Purple mangosteen
Quince
Rambutan
Raspberry
Redcurrant
Salak
Salal berry
Salmonberry
Satsuma
Soursop
Star apple
Star fruit
Strawberry
Surinam cherry
Tamarillo
Tamarind
Tangerine
Ugli fruit
Watermelon
White currant
White sapote
Yuzu
Demo: ListBox uses ItemsTextMixin and KeyboardPrefixCursorMixin for prefix matching

API

Used by classes AutoCompleteComboBox, FilterComboBox, FilterListBox, ListBox, Menu, MultiSelectListBox, OptionList, PlainAutoCompleteComboBox, PlainFilterComboBox, PlainFilterListBox, PlainListBox, PlainMenu, PlainMultiSelectListBox, and PlainOptionList.

getItemText(item) method

Extract the text from the given item.

The default implementation returns an item's aria-label, alt attribute, innerText, or textContent, in that order. You can override this to return the text that should be used.

Parameters:

  • item: Element

Returns: string