HTML custom component
select-char
Description
A bar of letters or digits to quickly filter a large list by the starting character.
HTML structure
[%<select-char nodes="#result > p">
<option>A</option>
<option sc-inactive>B</option>
<option sc-inactive>C</option>
<option sc-inactive>D</option>
<option>E</option>
<select-char>
<div id="result">
<p data-search="Adam">Adam</p>
<p data-search="Eve">Eve</p>
</div>
%]
Comments
It is easy to create the select-char markup with [1668, the corresponding PHP function].
There is no need to implement %select-char% a change handler in JavaScript, when you use the %nodes% attribute. This holds a selector of the nodes to be filtered. Each node must have an attribute %data-search% holding the corresponding value.
To combine a %select-char% with an [1495, %input-search%] (like in the Topincs Index), just make sure they are siblings.
|
Preserves state when id attribute present on element
|
We are sorry
This page cannot be displayed in your browser. Use Firefox, Opera, Safari, or Chrome instead.