Repository List / bfilter / trunk / README.html @ HEAD

<h1>JavaScript binary filter</h1>

<p>
<small>
Written by Dobrica Pavlinusic
<a href="http://www.rot13.org/~dpavlin/"><tt>www.rot13.org/~dpavlin</tt></a>,
2004-11-21
</small>
</p>

<p>
I had a real-life problem: 17000 entries which I needed to filter in
near-real-time to present to users just some items in unsigned list. You
would probably say (as I would) that this is impossible in JavaScript.
</p><p>
First naive idea was to create gigantic 17000 element JavaScript array and
filter through this. This took 45 minutes (no, it's not a mistake, and
machine is pretty decent AMD Athlon box).
</p><p>
Something has to be done. First speedup was created by splitting huge 17000
element array into smaller slices (few characters) and require at least some
letters before displaying result. As you will soon find out, searching array
isn't the only problem: generating huge html (using DOM or innerHTML) can be
<em>very slow</em>.
<br/>
So, even if you manage to filter list fast enough, limiting filtering to
begin of two or three characters will dramatically reduce about of html
results that you have to create.
</p><p>
After initial implementation or split array, I was down from 45 minutes to
just 5-7 minutes which was almost 10-fold improvement. But, it was still
too slow for interactive use (which by old teletype standards should give
response to users below 3 seconds).
</p><p>
But, I had another idea at mind: why not pre-sort all segments and use fast
binary search? Of course, writing binary search in JavaScript isn't rocket
science, so approach should be valid. Buy, was I wrong. I used
<tt>bfilter.pl</tt> perl routine to produce my indexes. But, soon I found
out that sort order in JavaScript differs from browser to browser depending
on particular locale settings on machine.
</p><p>
While I could side-step that problem by writing localized version of sort (which
<a href="http://svn.rot13.org/~dpavlin/svnweb/index.cgi/js_locale/log/trunk/">
I actually did</a>), this was too slow for practical use.
<br/>
So, I decided just to write <a href="combo2/translate.js">unaccent</a>
in JavaScript and depend that sort order of 7-bit ASCII characters is same
in all JavaScript implementations (current routines work for
<tt>ISO-8859-2</tt> encoding which is used here in Croatia and Eastern
Europe).
</p><p>
Response time of binary search was below 3 seconds (and decent hardware
again), so this <a href="bfilter.html">problem was solved</a>. But, Matko
sow my code and said: <em>Eh, I could write combobox using this!</em>
</p>

<h1>JavaScript Combobox</h1>

<p>
Implementation of combobox has a little to do with me. Other than the fact
that it uses <tt>bfilter</tt> described above, all the other great work is
done my Matko Andjelinic. He has done <a href="combo.html">initial</a>
implementation on which I hacked a bit, and that's why it's so ugly.
</p><p>
Matko then rewrote it in object-oriented JavaScript which produced
<a href="combo2/test.html">current version of combobox</a>.
</p><p>
He also did <a href="combo2/test.php">php implementation</a>
(which is nice if you have php application and want to create comboboxes
on-the-fly from database). If you want to create static index file, you can
use <tt>bfilter.pl</tt> script.
</p>

<h1>Installation</h1>

<p>
Depending on your usage (do you make static html for CD or dynamic web
site?) you can use bfilter and checkbox in various ways. This is a toolbox.
Some assembly is required to get full power of comboboxes in your web
application.
</p><p>
There is no demo index supplied with this distribution. To create demo index
file for static html examples (<tt>test.php</tt> does it for you), please
type:
<pre>
	make combo
</pre>
on your command prompt. It will create <tt>combo-test.js</tt> with first
10000 entries from <tt>/usr/share/dict/words</tt>.
</p>

<h1>License</h1>

<p>
All code is licenced under
<a href="http://www.gnu.org/licenses/gpl.html">GPL</a> v2 or later.
</p><p>
More restrictive licensing (if you don't want to share your changes) is
available on request.
</p>