Olá, estou tentando fazer um filtro na minha SPA com um formulário para inserção de dados.
Tenho um formulário com 3 inputs text, e minha intenção é no campo de vendedor,digitar o nome do vendedor (tenho um autocomplete nesse input) e apertar o Enter no teclado, e após isso ele me trazer os dados na minha tabela que está abaixo do meu formulário, mas a minha ideia é realizar o filtro independente dos campos digitados, caso eu digitar o nome do cliente no campo de cliente, retorna os dados após o Enter, se eu digitar Endereço ou N° de Contrato realizar o filtro, como um Submit, seria praticamente um submit com o botão Enter do teclado.
Já fiz um filtro de uma maneira que está funcional, mas minha ideia seria usar uma função e colocar no formulário, com o evento 'onkeypress' recebendo a minha função, o modo que estou fazendo agora está diretamente na tag do form, que foi como eu fiz funcionar e está fazendo o filtro, meu objetivo é digitar em qualquer campo clicar no Enter e filtrar, independente do campo digitado.
Vou deixar abaixo como estou fazendo agora para filtrar(note na linha da tag form a forma que achei pra fazer o filtro no evento do botão):
<form action="@Url.Action("Filtros")" method="POST" id="formFiltros" onkeypress="if (event.keyCode == 13) { submitFormFiltro(); }">
<fieldset>
<div class="control-group">
<div class="row-fluid">
<div class="span3 ">
@Html.LabelFor(x => x.NumeroRegistroCliente, "Nº Contrato")
<div class="controls">
@Html.TextBoxPermissionFor(x => x.NumeroRegistroCliente)
</div>
</div>
<div class="span3" style="margin-top: 25px;">
@if (Model.IsRVS)
{
<label for="ApenasRVSRASComRetificacao">
@Html.CheckBoxPermissionFor(x => x.ApenasRVSRASComRetificacao)
Mostrar apenas RVS com retificação.
</label>
}
else
{
<label for="ApenasRVSRASComRetificacao">
@Html.CheckBoxPermissionFor(x => x.ApenasRVSRASComRetificacao)
Mostrar apenas RAS com retificação.
</label>
}
</div>
</div>
@if (Model.IsRVS)
{
<div class="row-fluid">
<div class="span6">
@Html.LabelFor(x => x.IdGrupoEmpresa, "Vendedor")
<div class="controls">
@Html.TextBox("GrupoEmpresaAutoComplete", "", new { placeholder = "Digite um vendedor(cnpj ou nome)..." })
@Html.HiddenFor(x => x.IdGrupoEmpresa)
</div>
</div>
<div class="span6">
@Html.LabelFor(x => x.IdCliente, "Adquirente")
<div class="controls">
@Html.TextBox("ClienteAutoComplete", "", new { placeholder = "Digite um adquirente..." })
@Html.HiddenFor(x => x.IdCliente)
</div>
</div>
</div>
}
else
{
<div class="row-fluid">
<div class="span6">
@Html.LabelFor(x => x.IdFornecedor, "Vendedor")
<div class="controls">
@Html.TextBox("FornecedorAutoComplete", "", new { placeholder = "Digite um vendedor..." })
@Html.HiddenFor(x => x.IdFornecedor)
</div>
</div>
<div class="span6">
@Html.LabelFor(x => x.IdGrupoEmpresa, "Adquirente")
<div class="controls">
@Html.TextBox("GrupoEmpresaAutoComplete", "", new { placeholder = "Digite um adquirente(nome ou cnpj)..." })
@Html.HiddenFor(x => x.IdGrupoEmpresa)
</div>
</div>
</div>
}
</div>
</fieldset>
</form>
<div class="form-actions">
<div style="float: right">
<button id="btnFiltro" class="btn btn-primary" onclick="submitFormFiltro();">
<i class="icon-filter icon-white"></i>Filtrar
</button>
<button class="btn btn-primary" onclick="limparFiltro();">
Limpar
</button>
</div>
</div>
Minha ideia seria criar uma função lá no arquivo JavaScript,e chamar ela no form, vou deixar o trecho de código que tentei fazer e não retornou o filtro:
function submitInputsFilter() {
$('#formFiltros').on(("keypress", function (e) {
var value = $(this).val() || !value;
if (e.keyCode == 13 ) {
$('#formFiltros').submit();
}
}));
}
Tentei chamar esse método submitInputsFilter(); onde está a tag form, mas ele não retornou nada.
Da maneira que está agora, realizando o filtro, está chamando como referência o método que está no botão filtrar, mas eu gostaria de fazer um método que é executado da mesma forma que o botão, somente com o click do Enter.
Qualquer ajuda é valida para eu melhorar meus conhecimentos, obrigado!