Tag Archives: autocomplete

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/

jQuery UI: How to Select All Text when the User clicks on the Autocomplete control Programming 20 MAR 2015

The jQuery UI toolbox gives you a lot of new controls to play around with if you are already using the awesome jQuery library, one of which it the very useful autocomplete control.

Essentially “Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.”

The problem arises when something is pre-populated in the autocomplete element, i.e. something had previously been selected. When you click on the control to start searching, your newly entered text simply appends on to the end of the existing text, resulting in a gobbledygook search!

To combat this we essentially need to select all text when the autocomplete box is called upon, and it turns out to do this we need to work with the mouse up event.

In practice, the code to achieve this select all text on entering the autocomplete search box looks like this:

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
$(document).ready(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    }).on('mouseup', function() {
              $(this).select();
          });
});

As you can see, we add the mouseup event monitor at input initialization, and with this now in place, every time the user clicks on the control any existing text is automatically selected – meaning that as soon as the user starts entering text, whatever was there previously will now be lost. Victory!

laptop click with mouse

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

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/

AutoComplete Country Selection using jQuery CodeUnit 12 MAR 2010

Marc-Antoine Ross has knocked together a great little jQuery plugin, or extension if you will, which gives you a nice autocomplete country selector textbox (with little flags).

So in order for someone to provide you with their nationality, all they now need to do is start typing in a little form textbox provided and after two letters or so, they can simply select from the available drop down list the country which they wish to list.

The extension uses Jorn Zaefferer’s Autocomplete jQuery plugin, FamFamFam’s flag icon set and Aral Balkan’s ISO country data source in case you were wondering.

Related Link: http://www.devtaxi.com/tools/accountry/