Tag Archives: jqueryui

jQuery UI Autocomplete: How to clear the Search Text after Selection Programming 24 MAR 2015

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. One of the useful widgets in the collection is the Autocomplete widget, which enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Easy to implement, works like a charm, the question then is how does one clear the search text after the user makes a selection from the autocomplete list?

Simply setting the value to ” in the select event function declaration won’t work out of the box, because the select event occurs before the field is actually updated – in other words, your change will be lost when the textbox is updated. To prevent this from happening, you essentially need to cancel the event to stop it from running to completion – in other words, return false.

So in practice, your declaration should look like this:

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
$(document).ready(function(){
var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      select: function(event, ui) {
          alert(ui.item.value);
          this.value = "";
          return false;
      }
    });
});

And that is all there is to clearing the search term from the Autocomplete box after a user selects something!

pink convertible bug - volkswagen beetle

Related Link: http://jqueryui.com/autocomplete/

How to Remember which Tab was Open with jQueryUI and Cookies CodeUnit 13 FEB 2013

jqueryui logoIt is often quite useful on page reload or when coming back to a previously visited page, to open up that page with the last tab that was being viewed still activated. In the past jQuery UI tabs made this fairly easy through browser cookies being baked into the tabs initialization call.

Unfortunately, with the release of jQuery UI 1.10, the cookie option for tabs has been deprecated, rendering all your previous statements that looked like this, pretty much useless:

$("#mytabs").tabs({
cookie: {
name: 'mytabs',
expires: 1
}
});

From the official upgrade path notes:

Support for cookies is not part of the core functionality for tabs and there are many ways to manage state across page loads. Therefore, the cookie option has been deprecated in favor of setting the active option appropriately during initialization.

Luckily for us though, just because native tab support for cookies is gone doesn’t mean that we can’t still remember which tab was open using cookies – we just need to alter our approach first!

The idea is simple enough. As before, use a cookie to store the currently activated tab index. On load, if the cookie exists, activate the associated tab index. If it doesn’t exist, load the first one. Finally, on tab activate, update the cookie with the new index value.

In practice:

var tabCookieName = "mytabs";
$("#mytabs").tabs({
active : ($.cookie(tabCookieName) || 0),
activate : function( event, ui ) {
var newIndex = ui.newTab.parent().children().index(ui.newTab);
$.cookie(tabCookieName, newIndex, { expires: 1 });
}
});

Simple, but works like a charm!

PHP: How to Implement jQuery Autocomplete using a JSON datasource CodeUnit 12 AUG 2011

The jQuery UI library is really useful in that it packages a number of jQuery-driven interactions, widgets, effects and utilities into a single package, ready for smooth integration and even easier deployment. One of the many available widgets in the jQuery UI library is Autocomplete, which makes adding autocomplete functionality to an ordinary text searchbox a doddle!

Let’s have a look how to implement this when using PHP to provide us with a separate JSON datasource then, shall we?

First, if your web page contains a normal textbox within a form that is used to conduct searches, you need to attach the jQuery UI autocomplete functionality with the following code snippet:

$('#datafilter-search-textbox').autocomplete({
            source: "ajax-search-autocomplete.php",
            minLength: 2});

Note the minLength setting of 2. It is often useful to set the number of characters needed to initiate the search so as to minimize the possible amount of search return values for efficiency’s sake.

As you can see, we have prompted the autocomplete widget to make use of a file called ajax-search-autocomplete.php as a datasource. This file should look something like this:

//… all your database setup stuff
$searchresults = array();
$searchterm = (key_exists('term', $_GET)) ? $_GET['term'] : '';

if (strlen($searchterm) > 0) {
    $results = mysql_query("SELECT `name`  FROM `myTable` WHERE `name` LIKE '%$searchterm%' ORDER BY `name` ASC");
    while ($result = mysql_fetch_assoc($results)) {
        $searchresults[] = $result['filter-name'];
    }
}
$searchresults = array_map("html_entity_decode_custom", $searchresults);
$searchresults = array_map("get_correct_utf8_mysql_string", $searchresults);
echo json_encode($searchresults);

And that is it. Load it up and try it out, and hey presto, you now have a nifty autocomplete that took you almost no time to implement! :)

Related Link: http://jqueryui.com/demos/autocomplete/

jQueryUI Datepicker Calendar Control Visible at the Bottom of the Page CodeUnit 24 JUN 2011

For some or other annoying reason, my jQueryUI datepicker controls start exhibiting a weird bug where on page load, the normally hidden control calender was appearing right at the bottom of the page. Clicking on the launch control would then bring up the calendar correctly, and on selection or unfocus would then hide it again correctly. So only on page load then.

Luckily the fix to this annoying problem is actually nothing more than a simple CSS rule which you can add to the top of the affected page. (Note that this is after I spent a fair amount of time updating all my javascript plugins and trawling through the code to try and find the problem).

To solve, simply add:

#ui-datepicker-div { display: none; }

Yup, nothing more than that and your unwanted extra space at the bottom of the page is done for.

Nifty. (And yes, I still regard the jQuery and jQueryUI combo’s datepickers as one of the best ones currently available to website designers!)

Related Link: http://jqueryui.com/demos/datepicker/

jQuery DataTables: How to Use jQuery ThemeRoller CSS Styling on Your Table CodeUnit 11 AUG 2010

Widget styling is a long, laborious and tedious job for the most part, which is exactly why it is so great that the guys behind jQuery UI came up with the ThemeRoller concept which basically enforces a strict set of rules in terms of generic widget class styling.

As a bonus, the awesome jQuery DataTables plugin (which I religiously use on all my work-related HTML tables nowadays) comes with the option to enable jQuery ThemeRoller styling with a simple switch of an initialisation parameter!

To enable jQuery UI ThemeRoller support in your datatable, simply add the following option during construction:

$(document).ready( function() {
	$('#example').dataTable( {
		"bJQueryUI": true
	} );
} );

And that is all there is to it. Make sure you include a ThemeRoller stylesheet link in your page and your nifty DataTables implementation should be using all those nifty ThemeRoller styling elements!

Nice! :)