Autocomplete Ajax AutoFocus Test

Shows that tabbing out of an autocomplete stops a lookup, which might theoretically be good, but from a usability standpoint, its bad. Autocomplete is supposed to make data entry faster. When a user gets familiar with an applicaiton, he will know that a couple of letters will select a particular item, and will expect that item to be selected.

HTML

<div class="ui-widget">
  <label for="city">City: </label>
  <input id="city" />
</div>
<div class="ui-widget">
  <label for="birds2">Birds2: </label>
  <input id="birds2" />
</div>

CSS

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

JavaScript

$( "#city" ).autocomplete({
        autoFocus: true,
      source: function( request, response ) {
        $.ajax({
          url: "http://ws.geonames.org/searchJSON",
          dataType: "jsonp",
          data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
          },
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2,
      select: function( event, ui ) {
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });