Search by all or just one form field

0

I'm having problems with a form in my WordPress blog, I have the following form that is in the functions.php file.

function terapeuta_search_scripts(){
wp_enqueue_script('terapeutas', get_stylesheet_directory_uri() . '/js/terapeutas.js', array(), '1.0.0', true);
wp_localize_script('terapeutas', 'ajax_url', admin_url('admin-ajax.php'));
}

function terapeuta_search(){
terapeuta_search_scripts();

ob_start();
?>
<div id="bed-search">
    <form action="" method="get">
        <input placeholder="Pesquise um nome..." id="terapeuta-nome" type="text" name="terapeuta-nome" />
        <select id="terapeuta-estado" name="terapeuta-estado">
            <option value="" selected="selected">Estados</option>
            <option value="AL">AL</option>
            <option value="BA">BA</option>
            <option value="CE">CE</option>
            <option value="DF">DF</option>
            <option value="GO">GO</option>
            <option value="MG">MG</option>
            <option value="MS">MS</option>
            <option value="MT">MT</option>
            <option value="RJ">RJ</option>
            <option value="RN">RN</option>
            <option value="RS">RS</option>
            <option value="SP">SP</option>
            <option value="SC">SC</option>
            <option value="PR">PR</option>
        </select>
        <select id="terapeuta-cidade" name="terapeuta-cidade">
            <option value="" selected="selected">Cidades</option>
            <option value="Armação dos Búzios">Armação dos Búzios</option>
            <option value="Atibaia">Atibaia</option>
            <option value="Belo Horizonte">Belo Horizonte</option>
            <option value="Brasília">Brasília</option>
            <option value="Bueno Brandão">Bueno Brandão</option>
            <option value="Campinas">Campinas</option>
            <option value="Campos do Jordão">Campos do Jordão</option>
            <option value="Cianorte">Cianorte</option>
            <option value="Curitiba">Curitiba</option>
            <option value="Chapecó">Chapecó</option>
            <option value="Delfim Moreira">Delfim Moreira</option>
            <option value="Florianópolis">Florianópolis</option>
            <option value="Foz do Iguaçu">Foz do Iguaçu</option>
            <option value="Garça">Garça</option>
            <option value="Guarantã do Norte">Guarantã do Norte</option>
            <option value="Ilhabela">Ilhabela</option>
            <option value="Maceió">Maceió</option>
            <option value="Maracaju">Maracaju</option>
            <option value="Miguel Pereira">Miguel Pereira</option>
            <option value="Morungaba">Morungaba</option>
            <option value="Natal">Natal</option>
            <option value="Piratininga">Piratininga</option>
            <option value="Porto Alegre">Porto Alegre</option>
            <option value="Rio de Janeiro">Rio de Janeiro</option>
            <option value="Santana de Parnaíba">Santana de Parnaíba</option>
            <option value="São Paulo">São Paulo</option>
            <option value="Santo André">Santo André</option>
            <option value="Sinop">Sinop</option>
            <option value="Sorocaba">Sorocaba</option>
            <option value="Ubatuba">Ubatuba</option>
            <option value="Uruçuca">Uruçuca</option>
            <option value="Uberlândia">Uberlândia</option>
            <option value="Volta Redonda">Volta Redonda</option>
        </select>
        <button type="submit">Buscar Terapeuta</button>
    </form>

    <ul style="list-style-type:none;"></ul>

</div>
<?php
return ob_get_clean();
}

And in my JavaScript file is the following code ...

$ = jQuery;

var bedSearch = $("#bed-search");
var searchForm = bedSearch.find("form");

searchForm.submit(function(e){
e.preventDefault();

    var data = {
        action : "terapeuta_search",
        nome : bedSearch.find("#terapeuta-nome").val(),
        estado : bedSearch.find("#terapeuta-estado").val(),
        cidade : bedSearch.find("#terapeuta-cidade").val()
    };
    $.ajax({
        url : ajax_url,
        data : data,
        success : function(response){
            bedSearch.find("ul").empty();
            for(var i = 0; i < response.length; i++){
                console.log(response[i]);
                var html = "<li id='terapeuta-" + response[i].id + "'><a style='color:orange;' href='" + response[i].permalink + "'>" + response[i].nome + "</a></li>";
                bedSearch.find("ul").append(html);
            }
        }
    });
});

At the moment the search works if I fill in [name + state + city] or [state + city], but I'm lost in how to do so it can be possible to search only one of the fields being filled in.     

asked by anonymous 20.02.2018 / 06:28

0 answers