How to send an object ID in jQuery autocomplete?

Question

I need the ID of the selected item in the jquery Autocomplete, when selecting the item by autocomplete, send the ID of the selected item to the form. On the label Text when sending the item ID via post

        public ActionResult Cadastrar()
    {
        var veiculoVM = new VeiculoViewModel();
        veiculoVM.Pessoas = PessoaRepositorio.ListarPessoas()
         .Select(p => new Pessoa() { Nome = p.Nome, Codigo = p.Codigo }).ToList();


    }

  <script type="text/javascript" charset="utf-8">
$(document).ready(function () {

    var Pessoas = new Array();

    @if (Model.Pessoas != null) {
        foreach (var item in Model.Pessoas) {
            @:Pessoas.push('@item'.replace("&#186;", " "));
        }
    }


    $('#Pessoa').autocomplete({
        lookup: Pessoas,
    });
})

   <fieldset>
<div class="control-group">
    @Html.Label("Cliente: ")
    <div class="controls">
        @Html.TextBox("Pessoa")
        @Html.HiddenFor(model => model.CodigoPessoa, new { id = "hidden" })

    </div>
</div>
<div class="control-group">
    @Html.Label("Categoria do Veículo: ")
    <div class="controls">
        @Html.DropDownListFor(v => v.CodigoCategoriaVeiculo, Model.CategoriaVeiculoList)
    </div>
</div>
<div class="control-group">
    @Html.Label("Descrição: ")
    <div class="controls">
        @Html.TextBoxFor(v => v.Descricao, new { maxlength = "20" })
    </div>
</div>
<div class="control-group">
    @Html.Label("Ano de Fabricação: ")
    <div class="controls">
        @Html.TextBoxFor(v => v.AnoFabricacao, new { maxlength = "4" })
    </div>
</div>
<div class="control-group">
    @Html.Label("Placa: ")
    <div class="controls">
        @Html.TextBoxFor(e => e.Placa, new { maxlength = "7" })
    </div>
</div>
<div class="control-group">
    @Html.Label("Chassi: ")
    <div class="controls">
        @Html.TextBoxFor(e => e.Chassi, new { maxlength = "20" })
    </div>
</div>

Answer 1

In his Controller you can return the Codigo and the nome in a Json , leaving your consultation more performative.

Would something like this:

public ActionResult Find( string term)
    {
        var resultado = PessoaRepositorio.METODO IENUMERABLE.Where(c => c.Nome.ToUpper().Contains(term.ToUpper()))
            .Select(c => new { value = c.Nome, id=c.Codigo });

        return Json(resultado.ToArray(), JsonRequestBehavior.AllowGet);

    }

And in your View, you would have the TextBox code (Hidden) and name.

<div class="control-group">
                        @Html.Label("Cliente: ")
                        <div class="controls">
                             <input id="nomeCliente" type="text" class="form-control">
                             <input id="txtCodigo" type="hidden" class="form-control" name="CodigoPessoa"/>
                        </div>
                    </div>

And would do the search, using the AutoComplete, along with a request ajax being like this:

<script>
    $(function () {
        $("#nomeCliente").autocomplete({
            //           source:  '@Url.Action("Find", "Funcionario")'
            source: function (request, response) {
                $.ajax(
                    {
                        url: "Find",
                        dataType: "json",
                        data: { 'term': request.term },
                        success: response
                    });
            },

            focus: function (event, ui) {
                $("#CodigoPessoa").val(ui.item.value);
            },

            select: function (event, ui) {
                $("#txtCodigo").val(ui.item.value);
                $("#txtCodigo").val(ui.item.id);
                return false;
            }
        });
    });

</script>

Where in the script it makes a search in the method Find of your Controller returning the Nome in his AutoComplete and saving the Code.