Is there a way to fill input fields after selecting a value of a suggestion field?

Question

I'm working in a web-application (MVC) with asp.net core of a sales system.

In my sales order create I have a field that, when the user start typing, suggest a text to be selected. The thing is: I need that when the user select a text, other fields related to that information autocomplete.

I tried Implement my Controller and view (as show bellow) but the only thing I could make work was the suggestion field #searchCNPJ without filling the #nomeCliente

Controller

public IActionResult AutoComplete_Cliente()
{
      var name = HttpContext.Request.Query["term"].ToString();
      var cnpj = _context.Juridicos.Where(pf => pf.CNPJ.Contains(name)).Select(pj => pj.CNPJ).ToList();

      return Ok(cnpj);
}

View

<div class="form-row mt-2">
    <div class="col col1 col-sm-3 disabled">
        <label class="control-label">CNPJ/CPF CLIENTE</label>                
        <input id="searchCNPJ" type="text" name="SearchString" class="form-control" placeholder="" />
    </div>
    <div class="col col3 col-sm-9">
        <label class="control-label">NOME CLIENTE</label>
        <input id="nomeCliente" class="form-control disabled" />
    </div>
</div>

 @section Scripts{
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>        
        <script>
            $(function () {
                $("#searchCNPJ").autocomplete({
                    source: '/Pedidos/AutoComplete_Cliente'
                });
            });
        </script>
    }

I also Tried the following code for my controller, but I don't exactly know how to implement in my view

 public IActionResult AutoComplete_Cliente(string cpf)
{
    var name = HttpContext.Request.Query["term"].ToString();           
    var cnpj = _context.Juridicos.Where(pj => pj.CNPJ.Contains(name)).Select(pj => new SelectListItem { Value = pj.CNPJ, Text = pj.RAZAO_SOCIAL,}).ToList();

    return Ok(cnpj);
}

Answer 1

Here is a simple demo like below:

1.Model:

public class Test
{
    public int Id { get; set; }
    public string CNPJCLIENTE { get; set; }
    public string NOMECLIENTE { get; set; }
}

2.View:

<div class="form-row mt-2">
    <div class="col col1 col-sm-3 disabled">
        <label class="control-label">CNPJ/CPF CLIENTE</label>                
        <input id="searchCNPJ" type="text" name="value" class="form-control" placeholder="" />
    </div>
    <div class="col col3 col-sm-9">
        <label class="control-label">NOME CLIENTE</label>
        <input id="nomeCliente" class="form-control disabled" />
    </div>
</div>
@section Scripts{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {          
            $("#searchCNPJ").autocomplete({
                source: '/Home/Test'              
            });
        });          
        $('#searchCNPJ').on('autocompletechange change', function () {
            var data = this.value;
                $.ajax({
                    type: "Get",
                    url: "/Home/Test2?name="+data,
                    success: function (data) {
                        console.log(data);
                        $('#nomeCliente').val(data);
                    }
               })                     
             }).change();
    </script>
}

3.Controller:

public class HomeController : Controller
{
    private readonly YourContext _context;
    public HomeController(YourContext context)
    {
        _context = context;
    }
    public IActionResult Test()
    {
        //provides suggestions while you type into the field
        var name = HttpContext.Request.Query["term"].ToString();
        var CNPJCLIENTE = _context.Tests.Where(c => c.CNPJCLIENTE.Contains(name)).Select(c => c.CNPJCLIENTE).ToList();
        return Ok(CNPJCLIENTE);
    }
    [HttpGet]
    public JsonResult Test2(string name)
    {
        //fill input fields when you select CNPJ CLIENTE
        var NOMECLIENTE = _context.Tests.Where(c => c.CNPJCLIENTE == name).Select(c => c.NOMECLIENTE).ToList();
        return new JsonResult(NOMECLIENTE);
    }
}

4.Result (When you type a letter,it would give you suggestions.Then you select one item and click anywhere to trigger change event):