Topincs Reference
PHPJavaScriptHTML ComponentsIndex
0Sign in
HTML custom component A-Z Ongoing

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.

Productive examples

www.topincs.com/…rial/movies/.index?tt=237

Preserves state when id attribute present on element

1

We are sorry

This page cannot be displayed in your browser. Use Firefox, Opera, Safari, or Chrome instead.

Saving …

   

Before we continue …

No internet connection

Refreshed lab_unknown

Edit