How do I perform a text search and select tag together?

Question

I’m here because I’m having trouble doing a search like any other with <input text> and "search" button only with the tag <select> where they contain in each <option> to value respective of the research. The question is in jQuery because in php I’m turning here, MVC model system, I hope I can with this question help other members.

Here is the html:

<div class='fba_campo'>
    <input type="text" name="pesquisa" id="pesquisa_faq" placeholder="<?=$i->getFormularioIdioma("Pesquisar")?>" class='faq_wh_100'>
</div>


<select name='' id='faq_options' class='faq_wh_100'>
    <option value='0'><?=$i->getFormularioIdioma("Todos")?></option>
    <option value='Guia'><?=$i->getFormularioIdioma("Guia")?></option>
    <option value='Materiais'><?=$i->getFormularioIdioma("Materiais")?></option>
    <option value='Produtos'><?=$i->getFormularioIdioma("Produtos")?></option>
    <option value='Vídeos'><?=$i->getFormularioIdioma("Vídeos")?></option>
</select>

<div class='fba_button'>
    <input type="button" id="faq_bt_pesquisar" value='<?=$i->getFormularioIdioma("Pesquisar")?>' class='faq_wh_100'>
</div>

And the div that will receive the values of the research is this .hide():

<div id="tabela_pesquisa">
    <center>
        <h2 id="h2_transicao_faq" style="color:black;"></h2>    
        <center><img src="<?=$url?>control/img/inwhats/loading_big.gif" id="loading_big_faqpesquisa" style="display: none;"></center>
    </center>

    <table class="tabela_faq">

    </table>

</div>

And here is the javascript:

$('body').on("click","#faq_bt_pesquisar",function(){

    $("#h2_transicao_faq").html("<?=$i->getMensagemIdioma("Pesquisando...")?>");
    $("#faq_area_conteudo").hide();
    $("#tabela_pesquisa").show();
    $("#loading_big_faqpesquisa").css("display","block");

    setTimeout(function(){

        $.post("<?=$url?>insoft/header/ajaxCarregapesquisafaq",$("#form_pesquisa").serialize(),function(data){


            var resposta = eval(data);
            if(resposta.length > 0){

                alert(data)
                $("#loading_big_faqpesquisa").css("display","none");
                $("#h2_transicao_faq").html("");
                var html = "";
                for(var b = 0;b < resposta.length;b++){
                     html += "<tr>";
                     html += "<td>"+resposta[b]['pergunta']+"</td>";
                     html += "</tr>";
                 }


            }else{

            }

        });

    }, 2000);

});

Here is the controller in php:

public function ajaxCarregapesquisafaq(){

    $filtro   = $_POST['filtro'];

    if(isset($_POST['pesquisa'])){

        if($filtro == "Guia" || $filtro == "0"){
            $obj_cat    = new daoCategoria();
            $cat        = $obj_cat->Where(" ica_nome LIKE '%".$_POST['pesquisa']."%' OR ica_codigo LIKE '%".$_POST['pesquisa']."%' ")->Consultar();
            $categorias = array();
            foreach($cat as $ct){
                $categorias = array("categoria"=>utf8_encode($ct['ica_nome']),"codigocat"=>$ct['ica_codigo']);
            }

            echo json_encode($categoria);


        }elseif($filtro == "Materiais"){
            $obj_mat   = new daoMaterial();
            $mat       = $obj_mat->Where(" ima_titulo LIKE '%".$_POST['pesquisa']."%' OR ima_codigo LIKE '%".$_POST['pesquisa']."%' ")->Consultar();
            $materiais = array();
            foreach($mat as $mt){
                $materiais[] = array("material"=>utf8_encode($mt['ima_titulo']),"codigomat"=>$mt['ima_codigo']);
            }

            echo json_encode($material);

        }elseif($filtro == "Produtos"){
            $obj_pro  = new daoProduto();
            $pro      = $obj_pro->Where(" ipd_descricao LIKE '%".$_POST['pesquisa']."%' OR ipd_codigo LIKE '%".$_POST['pesquisa']."%' ")->Consultar();
            $produtos = array();
            foreach($pro as $pd){
                $produtos[] = array("produto"=>utf8_encode($pd['ipd_descricao']),"codigopd"=>$pd['ipd_codigo']);
            }

            echo json_encode($produtos);

        }elseif($filtro == "Videos"){
            $obj_vid = new daoVideo();
            $vid     = $obj_vid->Where(" ive_titulo LIKE '%".$_POST['pesquisa']."%' OR ive_codigo LIKE '%".$_POST['pesquisa']."%' ")->Consultar();
            $videos  = array();
            foreach($vid as $vd){
                $videos[] = array("video"=>utf8_encode($vd['ive_titulo']),"codigovid"=>$vd['ive_codigo']);
            }

            echo json_encode($videos);
        }

    }else{
        echo json_encode(array("resultado"=>"erro"));
    }

}

Thank you very much, sorry the javascript is incomplete because I’m still checking but I would like you to help me with opinions too, any help is welcome, thanks again!

Answer 1

I would do something like this...

$("body").on("click","#faq_bt_pesquisar",function(){
  $("#h2_transicao").html("<?=$i->getMensagemIdioma("Pesquisando...")?>");
  $("#loading").css("display","block");
  $("#faq_area_conteudo").hide(); /*div com o conteudo anterior a ser escondido*/

  var dados = { textoPesquisa : $('pesquisa_faq').val(), optionsPesquisa : $('faq_options').val()};

  $.post( "<?=$url?>insoft/faq/ajaxcarregaconteudo", dados)
    .done(function( data ) {
      alert( "Dados recebidos: " + data );
  });
});

I created a data JSON object that will take the data from the field.

You could also encapsulate the fields in a form with id="formPesquisa" and instead of setting the 'data' in hand you could do so...

var dados = $('#formPesquisa').serialize();

*(detail that in this case the fields would have to have the "name" set)