The default functionality of the jQuery UI autocomplete will match text input against any part of a string in a searched data set. If you want to exclusively search from the beginning, you have to make some adjustments.

Remote Datasource
If you are using a remote datasource that queries a database, you can adjust your SQL statement to match the term at the beginning.
mysql_query("SELECT * FROM states where state like '" . mysql_real_escape_string($_GET['term']) . "%'")
If you cannot adjust the SQL for the remote datasource, you can still search from the start of the string. Be aware that, with this method, you may be returning a large dataset and that could have performance issues.
Using the U.S. states autocomplete as an example (xml source example below), a match can be made from the beginning of the string with a remote datasource like this:
$("#state").autocomplete({
source: function(req, response) {
$.ajax({
url: "states.php",
dataType: "json",
success: function( data ) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp( "^" + re, "i" );
response($.grep(data, function(item){return matcher.test(item.value);}) );
}
});
},
minLength: 2,
select: function(event, ui) {
$('#state_id').val(ui.item.id);
$('#abbrev').val(ui.item.abbrev);
}
});
Several things are happening:
- The data from the source is retrieved via an ajax call
- The term is escaped for any symbols that may cause a regular expression to be evaluated
- The matcher is given a new regular expression that instructs it to begin the search at the start of the string (^) and to be case insensitive (i)
- It then calls matcher.test to match the term against the value of the data item (this could be label depending on how your data is returned)
Remember, you need to return either a value or a label in the data item or the autocomplete will not work. Read the autocomplete documentation if you are not familiar with those fields:
The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.
Remote Datasource Autocomplete Demo
Array Datasource
If the datasource is an array of values or objects, the following method can be applied:
var states = [{"id":"1","label":"Armed Forces Americas (except Canada)","abbrev":"AA"},{"id":"2","label":"Armed Forces Africa, Canada, Europe, Middle East","abbrev":"AE"},{"id":"5","label":"Armed Forces Pacific","abbrev":"AP"},{"id":"9","label":"California","abbrev":"CA"},{"id":"10","label":"Colorado","abbrev":"CO"},{"id":"14","label":"Florida","abbrev":"FL"},{"id":"16","label":"Georgia","abbrev":"GA"},{"id":"33","label":"Northern Mariana Islands","abbrev":"MP"},{"id":"36","label":"North Carolina","abbrev":"NC"},{"id":"37","label":"North Dakota","abbrev":"ND"},{"id":"43","label":"New York","abbrev":"NY"},{"id":"46","label":"Oregon","abbrev":"OR"}];
$("#state").autocomplete({
source: function(req, response) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp( "^" + re, "i" );
response($.grep(states, function(item){return matcher.test(item.label); }) );
},
minLength: 2,
select: function(event, ui) {
$('#state_id').val(ui.item.id);
$('#abbrev').val(ui.item.abbrev);
}
});
Similar to the remote datasource example except this does not need the ajax call. The states array is simply pulled into the response and the rest is handled the same.
Array Datasource Autocomplete Demo
XML Source Example