Sorting of lists in jQuery

nospam@example.com (Mark van der Velden) — Tue, 06 Oct 2009 13:00:00 +0200

A while back I posted a simple sorting algorithm for number sorting, but it doesn't really do the trick for regular strings (e.g. anchors). But since I needed one recently I wrote another small and very simple sorting solution.

For a working example, see: http://dynom.nl/jquery/listsort.php

My.List = {
Sort : function (listSelector) {
var sortedElements, left, right;

// If we have any list items to sort on
if ($(listSelector + ' li').length > 0) {

// Remove the items from the DOM
sortedElements = $(listSelector + ' li').remove();

// Sort, using a custom sorting and compare by anchor contents
sortedElements.sort(function (a, b) {
left = $(a).children('a').html();
right = $(b).children('a').html();

if (left > right) {
return 1;
} else if (right < left) {
return -1;
} else {
return 0;
}
});

// Place the items back on the DOM
$(listSelector).append(sortedElements);
}
}
};

Again, the source should be self explanatory

jQuery simple unordered list filter

nospam@example.com (Mark van der Velden) — Wed, 24 Jun 2009 15:50:21 +0200

I needed a simple filter system on a unordered list. The goal is to filter 'realtime' based on what a user is typing. I came up with the following, if you have any suggestions and/or performance tips feel free to drop a line!

The HTML:

The blog software is messing with the HTML, for a working example with ungarbled code. Look at the bottom of this post.

</p><div>
<input name="filter" id="search_filter" type="text">
</div><div id="titles">
<ul>
<li><a href="http://blog.dynom.nl/path/to/item/1">Item 1</a></li>
<li><a href="http://blog.dynom.nl/path/to/item/2">Item 2</a></li>
<li><a href="http://blog.dynom.nl/path/to/item/3">Item 3</a></li>
</ul>
</div>

The Javascript

Working example

Visit http://dynom.nl/jquery/list.php for a working example.

D-talk (Entries tagged as filter)

Sorting of lists in jQuery

jQuery simple unordered list filter

The HTML:

The Javascript

Working example