选择建议字段的值后，有没有办法填充输入字段？

Question

我正在使用销售系统的 asp.net 核心的 Web 应用程序 (MVC)。

在我的销售订单创建中，我有一个字段，当用户开始输入时，会建议选择一个文本。问题是：我需要当用户选择文本时，与该信息相关的其他字段自动完成。

我尝试实现我的控制器并查看（如下所示），但我唯一能做的就是建议字段#searchCNPJ，而不填写#nomeCliente

控制器

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);
}

查看

<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>
    }

我也为我的控制器尝试了以下代码，但我不完全知道如何在我的视图中实现

 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

这是一个简单的演示，如下所示：

1.型号：

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

2.查看：

<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.控制器：

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（当你输入一个字母时，它会给你建议。然后你选择一个项目并单击任何地方触发更改事件）：