jQueryUI 1.8.14 Autocomplete

by Brunno Romero

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<input type="text" id="descricao" />
<input type="hidden" name="idQueVaiParaSeuBackEnd" id="id" />

JavaScript

var source = [{
    label: "Tom Smith",
    value: "1234"
}, {
    label: "Tommy Smith",
    value: "12321"
}];

$("#descricao").autocomplete({
    source: source,
    minLength: 3, //quantidade de caracteres para começar a buscar
    select: function (event, ui) {
        //evento de quando você seleciona uma opção        
        $("#descricao").val(ui.item.label); //seto a descrição para aparecer para usuario no input text
        $("#id").val(ui.item.value); //seto o id para ir para seu backend :D
        event.preventDefault();
    }
});