valeriogalano/checkboxtree

Feature request: Methods to programmatically expand all options with label texts (or input values) matching a regular expression

Closed this issue · 3 comments

I would like to be able to put a text element above the checkbox tree, and when 
entering something in the field I would like to expand all checkbox options 
which contains the text I edited as a substring.

To implement this kind of feature, it would be nice with a method that I can 
use programmatically (from my event handler of the text input element) that 
expands all options with a label text that matches a regular expression 
provided as a parameter.

In other words, a method like this is desired:
expandAllOptionsWithLabelText(regularExpressionToMatchWithLabelTexts)

In other situations, it might be useful to match the non-visible input value 
(the value attribute of the input element) instead of the visible label text 
node, i.e. a method like this:
expandAllOptionsWithInputValue(regularExpressionToMatchWithInputValues)

And lastly, sometimes one might want to expand all options with either a 
matching visible label text or a matching non-visible value, i.e. a method such 
as:
expandAllOptionsWithLabelTextOrInputValue(regularExpressionToMatchWithLabelTexts
OrInputValues)

If this feature will become implemented, then please make sure to handle the 
label text (the text "My Node" in examples below) regardless of whether it is 
alone within the label element or is located before or after the input element:
<input type="checkbox" value="myValue" /><label>My Node</label> 
<label><input type="checkbox" value="myValue" />My Node</label>
<label>My Node<input type="checkbox" value="myValue" /></label>

(I prefer to not use the first one above with input element outside of label 
element as in the current demo examples, since it is otherwise easier to make 
the checkbox clicked, i.e. you can click the text and need not click exactly in 
the checkbox)

Original issue reported on code.google.com by samo...@gmail.com on 2 Jul 2011 at 9:01

Regarding the label text, I think it would be good if it will be able to match 
all node texts within the label element, for example within a span element that 
can be set to visually hidden.

For example, you might have a option displaying the text "United States" but 
want the option to become expanded also if the end user writes some other text 
that might be typically used in common language, for example "US" or "USA" (and 
in this example it is enough to specify "USA" in the hidden text since it 
contains the substring "US" too).

This is the kind of element I want the regular expression to be able to match:

<label><input type="checkbox" value="12345" />United States<span 
style="visibility:hidden">USA,Uncle Sam</span></label>

Basically, the node texts should be flattened out (stripping away html 
elements) into (in this example) "United States USA,Uncle Sam".

Then some regular expression might be used for matching some part of that 
string.

For example, if the end user wrote the string "US" in the text input field, 
then I (i.e. the programmer) might concatenate it (though possibly with some 
additional escaping of special reg exp characters) with some regular expression 
prefix/suffix into the following regular expression string: "^.*US.*$".

That regular expression could then be provided as a parameter to the desired 
method.

Original comment by samo...@gmail.com on 2 Jul 2011 at 9:27

When thinking more about this I realize that it is not the matching node that 
should become expanded, but it is the parent node of the matching node that 
should become expanded, to display the matching node.

For example, let us say there is a root node "USA" and then there are subnodes 
with states e.g. "California", and the states have subnodes with cities e.g. 
"Los Angeles".


If the end user (of my desired feature that supports programmatic expansion of 
parent nodes matching a substring) enters the string "California" then the node 
"USA" should become expanded (to make "California" visible).
If the end user writes "Los Angeles", then the node "California" should become 
expanded (to make "Los Angeles" visible).

Also, I think it would nice to optionally let a css class be specified as 
parameter, and the implementation should add span tags around the matching 
substring, to make it possible to (for example) making the matched substrings 
bold or/and italic.

Potential method signature:
expandAllParentOptionsWhichWillMakeMatchingLabelTextsDisplayed(regularExpression
ToMatchWithLabelTexts, optionalCssClassToApplyAroundTheMatchingSubstring)

Example invocation:
expandAllParentOptionsWhichWillMakeMatchingLabelTextsDisplayed("^.*California.*$
", "matchedSubstrings")

The above invocation should create the following span tag to become created 
with DHTML:
<label><input type="checkbox" value="987" />The <span 
class="matchedSubstrings">California</span> state</label>
assuming that ir originally looked like this:
<label><input type="checkbox" value="987" />The California State</label>

To make the matching parts more visible, I might use the following CSS styling 
together with the above used css class as below:

.matchedSubstrings {
    font-weight : bold,
    font-style : italic
}

Original comment by samo...@gmail.com on 2 Jul 2011 at 9:54

This is a very particular feature. Script has some methods to collapse/expand 
and check/uncheck nodes.

To work as described in this issue, developer can identfy the node in a 
personal way (regexp, jquery find, etc.) and simply pass relative node object 
to available methods in the following way:

$( ".selector" ).checkboxTree( 'check', <nthNodeFoundInPreferredWay>);

Original comment by valerio....@gmail.com on 30 Oct 2011 at 3:42

  • Changed state: WontFix