Creo que alguien lo ha pedido antes, pero no puedo hacer que funcione con mi script. Cuando comienzo a escribir en el campo de entrada y, por ejemplo, comienzo con la letra A, recibo todas las etiquetas que contienen la letra A.

Solo quiero las etiquetas que comienzan con la letra A.

Este es mi guión:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>

$(function() {
$( "#tags" ).autocomplete({
source: [{
        label: "Apple",
        value: "http://www.apple.com"},
    {
        label: "Google",
        value: "http://www.google.com"},
    {
        label: "Yahoo",
        value: "http://www.yahoo.com"},
    {
        label: "Bing",
        value: "http://www.bing.com"}],
    minLength: 3,
    select: function(event, ui) {
        event.preventDefault();
        $("#tags").val(ui.item.label);
        $("#selected-tag").val(ui.item.label);
        window.location.href = ui.item.value;
    }
    ,
    focus: function(event, ui) {
        event.preventDefault();
        $("#tags").val(ui.item.label);
    }
});
});

Este es mi html:

<div class="ui-widget">
<label for="tags" style="float:left; margin-right:5px; font-size:12px; margin-top:10px; margin-left:55px; text-align:right;">Search Engines:</label>
<input type="text" placeholder="Search for engine..." id="tags" style="width:150px; padding:3px; margin:9px 0 0 0; float:right;" />
</div>

¿Es posible con mi guión como es ahora?

Gracias por adelantado