Question

Currently I have:

$("#location").autocomplete({source: cities, minLength: 0, autoFocus: true});

The problem is that this plugin searches for matches anywhere inside the given inputs.

For example, if I enter “Bos” it suggests not only the words that start with “Bos”, but also the words that have “bos” in the middle.

How can I fix this?

Answer 1

Looks like you’ll have to use the callback setting for the source option:

The third variation, the callback, provides the most flexibility, and
can be used to connect any data source to Autocomplete. The callback
gets two arguments:

• A request object, with a single property called “term”, which
  refers to the value currently in the text input. For example, when the
  user entered “new yo” in a city field, the Autocomplete term will
  equal “new yo”.
• A response callback, which expects a single argument to contain
  the data to suggest to the user. This data should be filtered based on
  the provided term, and can be in any of the formats described above
  for simple local data (String-Array or Object-Array with
  label/value/both properties). It’s important when providing a custom
  source callback to handle errors during the request. You must always
  call the response callback even if you encounter an error. This
  ensures that the widget always has the correct state. (source)

Untested:

$(function() {
    var options = ["Foo", "Bar", "Baz", "Foobar"];

    $(<selector>).autocomplete({
        source: function(request, response) {
                    var matches = [],
                        term = request.term.toLowerCase(),
                        termLen = term.length;

                    for (var i = 0, j = options.length; i < j; i++) {
                         if (options[i].substring(0, termLen).toLowerCase() == term) {
                             matches.push(options[i]);
                         }
                    }

                    response(matches);
            }
    });
});