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.
