Useful for validating a human-entered list of integers.
I was working on a search interface for a client where public visitors would be searching for a range of different values regarding event years, event place, ago, # of competitions, hours of training etc. I initially searched Google for "range slider" and found many interactive widgets that I could've added to the interface. I didn't personally like the experience as each slider represented a different range and it seemed weird to see them next to each other as they didn't represent the same thing.
Another option, initially proposed by the client, was to add a start & end drop-downs. This would mean generating hundreds of hidden <option>
values so the visitor could make their selection... and then require additional client-side logic to chain the selects together so that the max wouldn't be less than the min (and vice-versa). I didn't like this either as it requires a lot of mouse & mental interaction to select + keep in sync with each other. (I personally prefer typing, pasting or leveraging browser extensions to save+autofill whenever possible.)
I thought it would be best to allow the user to type anything that they wanted, limit which characters could be entered (0-9
, ,
, \s
and -
), sanitize values upon onchange
and perform the logic server-side to parse the numbers that were provided to both generate a list of integers (for use in a SQL IN
query) and display visually back to the visitor. I found formatListAsSeries UDF on CFLib (from 2010) that accepts a numeric list and generates a series for visual display... all I needed to do is figure out how to do the exact opposite AND enforce logical min/max rules.
Here's my attempt...
<cfset tests = [
["numberList": "0, 2021- , -1978, 1980-1984,1988, 1999, 8888, abc, 1920, 1E3", "minInt":1977, "maxInt":2022]
,["numberList": "2,1,6,,7,8,2, 2, 10, 1-3, 9.5", "minInt":1, "maxInt":10]
,["numberList": "0, 6, 4, 22, 100-200, 5, š ", "minInt":0, "maxInt":10]
]>
<cfoutput>
<h3>getIntsFromRangeString(numberList, <i>minInt</i>, <i>maxInt</i>)</h3>
<cfloop array="#tests#" index="test">
<cfset a = racerSearch.getIntsFromRangeString(argumentcollection=test)>
<b>getIntsFromRangeString("#test.numberList#", <i>#test.minInt#</i>, <i>#test.maxInt#</i>)</b><br>
<b>SortedValues:</b> <tt>#serializeJson(a.sortedValues)#</tt><br>
<b>SeriesString:</b> <tt>"#a.seriesString#"</tt>
<hr>
</cfloop>
</cfoutput>
This generates the following output:
getIntsFromRangeString("0, 2021- , -1978, 1980-1984,1988, 1999, 8888, abc, 1920, 1E3", 1977, 2022)
SortedValues: [1977,1978,1980,1981,1982,1983,1984,1988,1999,2021,2022]
SeriesString: "1977-1978, 1980-1984, 1988, 1999, 2021-2022"
------------------------------------
getIntsFromRangeString("2,1,6,,7,8,2, 2, 10, 1-3, 9.5", 1, 10)
SortedValues: [1,2,3,6,7,8,10]
SeriesString: "1-3, 6-8, 10"
--------------------------------
getIntsFromRangeString("0, 6, 4, 22, 100-200, 5, š ", 0, 10)
SortedValues: [0,4,5,6]
SeriesString: "0, 4-6"
Check it out and let me know if I forgot anything. Enjoy!
2022-09-20 Update: I've made some updates for performance as well as a SQL string generator.
CFML Source Code
https://gist.github.com/JamoCA/db753001d64a6fd4d46d2f591769c589
Top comments (0)