jQuery Autosuggest

So a week or two ago, I was looking around for a decent autosuggest plugin that had behavior similar to WordPress’ tag manager. The best one I found required jQuery UI which, for various reasons, I didn’t want to use. Furthermore, I needed a plugin that had some extensibility and could differentiate between delimited items.

Failing in my searches, I decided to write my own. You can download it from here. You’ll also need the supporting CSS, but it should be fairly easy to draft your own once you see mine. Your backend script will need to supply a JSON-encoded response roughly as follows (PHP-based example):

echo json_encode(array(array('text' => 'Match 1', 'id' => '1'), array('text' => 'Match 2', 'id' => 2), array('text' => 'Match 3', 'id' => 3)));

I’ll be posting a more feature complete back-end example shortly.

XSuggest usage is also fairly basic. Simply bind it to a text input field and pass in some useful options. Here’s an example:

HTML:

<style type="text/css">
.search {
    background: #eaeaea;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 20px;
}
</style>
<div class="search">
  <input type="text" name="search" />
</div>

JavaScript:

(function($){
    $(document).ready(function(){
 
        $("input[name=search]").suggest({
            searchUrl: "search.php"
        });
 
    });
})(jQuery);

searchUrl is the only required option that you must pass to the back end. There’s quite a few other options that can control the behavior of XSuggest, although it isn’t complete, and I expect to add a few more–particularly event handlers. The options you can currently set are:

  • searchUrl – URL of the back end script that supplies a JSON-encoded response listing matching data for XSuggest.
  • searchVariable – Search variable to attach the user’s input to. This is sent via GET (query string) normally, unless you override it; the default is s
  • searchData – Optional data to send along with the search. You may use this to tweak the back end’s response.
  • searchMethod – Request method. Default: GET.
  • cssClass – CSS class of the dropdown field. Default: xsuggest-dropdown. You may change this to anything you want, but be sure to update the CSS you’re using. You have to use this class–that’s not negotiable. It’s used for selectors as well as styling.
  • activate – Function called whenever the user activates the control by pressing enter. This is useful for overriding the form’s default behavior and adding the matched text to the page, similar to what WordPress does with tags. The function can optionally accept one argument containing the jQuery object representing the source control (i.e. your input field). This is useful for reading the field’s contents. One example might be: activate: function(element){$(".search").append("
    "+element.val()+"

    ");.

  • append – Allow the control to append data from the user’s input. Mostly useful for tags.
  • appendChar – Character to use for appending user input to the control. Default: “,”.
  • I’ll have more complete documentation and a better tutorial posted later. This plugin does have some potential performance issues (see source) and a few other bugs. For now, it’s pretty good for basic usage, but it might do weird things on high latency connections.

    Enjoy.

    No comments.
***

Quickie: Open Source Annoyances

As many of you know I’m a strong promoter of open source. I use a lot of F/OSS (Free/Open Source Software) applications and quite a few commercial ones. In many cases, I have found the the F/OSS apps are useful precisely because they don’t get in the way (OpenOffice.org versus Microsoft Office is a great example where the commercial application is a greater nuisance).

However, I have my share of gripes. I plan on writing a lengthy essay on one such complaint of mine, but that’s reserved for the future! This one is a lot more simple. Here:

Rhythmbox Screenshot

Meet Rhythmbox. It ships with Ubuntu (and Ubuntu variants like Linux Mint) as the default media player.

It’s a damn nuisance! It’s uselessness rivals that of Windows Media Player. Though, I think that’s an unfair comparison. WMP ships with useful codecs and is fairly capable in its own right.

Aside from the obvious issue of duplication effort–and there are a lot of free media players on the market these days–it’s increasingly obvious to me that some developers focus more on simplicity and less on usability. Here’s a short use case that they evidently didn’t plan for and it’s really simple. I like to listen to specific songs repeatedly. In fact, I’ll listen to exactly the same song over and over and over and over again until the neighbors lose their mind. If I like a song, I am going to put it on repeat and listen to it over and over again.

You can’t do this in Rhythmbox unless you use the search or artist features to limit the song displayed to one single track. I’m sure the developers would probably suggest that this is intentional–my use case has already been considered–and that the best way is to make sure my current play list shows only one song. I can work with that but it’s inconvenient. If I want to change songs, I have to use the search feature again which completely eliminates the point of having a playlist, album list, or artist list. I kind of like to browse through my list of songs before selecting one to place on repeat, and resorting to a search feature to repeat one track alone is a bit stupid.

Oh, and there’s a HUGE gap between the end of one track and the beginning of another. This occurs even if you have one song on your playlist. The last time I had such a huge gap in playback was when MP3s were first becoming popular and I had an early Pentium clocked at a whopping 200 MHz.

I’m glad I have Amarok to compete against nonsense like this.

Anyway, this rant has a reason. Open source developers often say one of two things: “It works exactly as intended and we have no reason to supply additional functionality” or the dismissive “I write this for my own enjoyment and if you don’t like it, tough!” In the former case, I’m glad there’s competition, and this is precisely why duplication of effort isn’t necessarily a bad thing: The more projects that provide the same service, the more potential competitors there are who are each likely to provide functionality a specific subset of people want. In the case of the latter, if a developer writes the software exclusively for himself and not for the hopes that someone else might make use of it (Pidgin developers, I’m lookin’ at you), that developer has no business encouraging their software to be included in a major public distro like Ubuntu. No, really.

I don’t want to get ahead of myself, though. This rant is one that’s been bugging me for a while now. I’ll have to write it up this weekend!

I think I went a little longer than I expected. If you have corrections or suggestions to make, post them and I’ll make good on any mistakes I’ve made. However, you won’t change my mind: Rhythmbox sucks. I suspect that there are only three types of people who use it: The Rhythmbox developers, poor SOBs who don’t know any better, and people who have extremely limited needs. I suspect the latter group could be mixed in with either of the former.

No comments.
***

Read More Patch

Update May 31st

I have completed an early version of this plugin. Feel free to download it! The administrative page is fairly bare but it does the job. Read more…

No comments.
***