Postawiłem przed sobą dość proste zadanie dodania nowego ‚ficzeru’ do pewnej wewnętrznej ministronki w firmie. Ot, taka mała lista obsługiwanych aplikacji. Z biegiem czasu ‚mutacji’ produktu powstało wiele, dlatego lista stała się dość pokaźna i znalezienie czegoś w niej stało się trudne.

Szczerze mówiąc nie szukałem gotowych rozwiązań problemu, czyli dynamicznej wyszukiwarki (wpisujemy np „Apli” i mamy wyświetlone linki zawierające w anchorze część „Apli”), na pewno bym coś takiego znalazł, jednak czasami fajnie jest napisać coś samemu.

Doszedłem do momentu, w którym pomyślałem „kurde, gdyby w js było linq…” – jest. linq.js to darmowa biblioteczka, która daje nam praktycznie wszystko co najlepsze ze znanego nam dobrze LINQ w .net 🙂

Powiedzmy, że mamy taki oto html:

<input type="text" id="search" />
<ul id="list">
    <li><a href="#">A</a></li>
    <li><a href="#">AB</a></li>
    <li><a href="#">ABC</a></li>
    <li><a href="#">ABC</a></li>
    <li><a href="#">D</a></li>
</ul>

teraz chcemy uzyskać listę linków, które w anchorze będą zawierać tekst wpisany w #search

var text = $('#search').val().toLowerCase();
var links = $('#list li a');
var result = Enumerable.From(links )
    .Where(function (x) { return $(x).text().toLowerCase().indexOf(text)>-1; })
    .OrderBy(function (x) { return $(x).text() })
    .ToArray();

jak widać, możemy korzystać z metod znanych nam z .net + korzystać także z innych bibliotek js, takich jak popularne jQuery 😉

Działający przykład zamieszczam na jsfiddle: http://jsfiddle.net/HGey5/1/ (nie znam na tyle js, ale jeżeli nie robię $(result).clone(), to przy $(‚div’).append(e) kasuje mi elementy z wejściowej listy ul… Nie wiem dlaczego. Z clone() działa 😉 )