Tenho dois menus dropdown na minha página, seguidos por um input text e um botão pesquisar, conforme o código abaixo:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Selecione o Campo
</button>
<ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">Codigo</a></li>
<li><a class="dropdown-item">Cargo</a></li>
<li><a class="dropdown-item">Tipo</a></li>
<li><a class="dropdown-item">Nome</a></li>
<li><a class="dropdown-item">Nome Usual</a></li>
<li><a class="dropdown-item">CPF/CNPJ</a></li>
<li><a class="dropdown-item">RG</a></li>
<li><a class="dropdown-item">Data Nascimento</a></li>
<li><a class="dropdown-item">Endereco</a></li>
<li><a class="dropdown-item">Numero</a></li>
<li><a class="dropdown-item">Complemento</a></li>
<li><a class="dropdown-item">Bairro</a></li>
<li><a class="dropdown-item">CEP</a></li>
<li><a class="dropdown-item">Cidade</a></li>
<li><a class="dropdown-item">Estado</a></li>
<li><a class="dropdown-item">Pais</a></li>
<li><a class="dropdown-item">Nome Conjuge</a></li>
<li><a class="dropdown-item">Nome Pai</a></li>
<li><a class="dropdown-item">Nome Mae</a></li>
</ul>
</div>
<br/>
Tipo de Busca:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Selecione a Busca
</button>
<ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" >Comeca com</a></li>
<li><a class="dropdown-item" >Igual a</a></li>
<li><a class="dropdown-item" >Termina com</a></li>
<li><a class="dropdown-item" >Contem</a></li>
<li><a class="dropdown-item" >Contem as partes</a></li>
</ul>
</div>
<br/>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12"> Informacao: </div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12"> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example" name="Dados_Cliente"> </div>
</div>
<br/>
<div class="row">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6"> </div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6"> <button type="button" class="btn btn-primary col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" name="Buscar_Cliente">Buscar</button> </div>
</div>
O primeiro menu dropdown o usuário seleciona qual campo ele deseja fazer busca no banco de dados (se ele deseja buscar o cliente pelo nome, pelo endereço, pelo cep ou pela cidade), e o segundo menu dropdown é o tipo da busca a ser realizada (se começa com o termo a ser pesquisado, se é igual a, se contém as partes, etc…). Em seguida o usuário digita os dados que deseja procurar no input text e clica no botão procurar para fazer a busca.
Quando o usuário clicar no botão “Buscar”, eu preciso que seja feita uma busca no Banco de Dados com base no que o usuário digitou e retornar se o cadastro existe ou não. Caso o cadastro exista, ele aparece nos inputs text abaixo do botão Buscar da janela modal, e caso o cadastro não exista, é mostrado uma mensagem dizendo que o cadastro não foi encontrado. Como posso fazer esse sistema de pesquisa e consulta no Banco de Dados? Como posso fazer esse sistema sem dar refresh na minha página?