custom search refreshing on submit and not giving results

enter image description here

The custom search refreshes on submit and also does not give any results. I am not sure what is wrong with the code but if someone could take a look at it to help me see what I am missing, I would sure appreciate it. Thank you in advance.

front-page.php

<form>
<section class="" style="margin-top: 60px; padding-bottom: 0;">
<div class="concept-bar">
  <div class="container">
  <h2 class="title-bar">EJES ESTRATÉGICOS</h2>
    <div class="row" style="padding-top: 20px;">
      <div class="col-4">
        <div class="number-holder"><span class="eje-number">1</span>
          <h2 class="concept-item">DESAROLLO INTEGRAL DE TALENTO</h2>
        </div>
      </div>
      <div class="col-4">
        <div class="number-holder"><span class="eje-number">2</span>
          <h2 class="concept-item">APOYO AL BEISBOL INFANTIL Y JUVENIL</h2>
        </div> 
      </div>
      <div class="col-4">
        <div class="number-holder"><span class="eje-number">3</span>
          <h2 class="concept-item">IMPULSO DE CONCEPTO "BEISBOL" EN MÉXICO</h2>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

<section class="s-raking">
    <div class="container">

        <?php
            $terms = get_terms( array(
                'taxonomy' => 'ranking',
                'hide_empty' => false,
            ) );
        ?>

<!-- <?php
        if(isset($_GET["position"])){
            $position=$_GET["position"];
            // echo "select position is => ".$position;
        }
?>  -->

        <h2 class="title-bar" data-ranking="<?php echo $terms[0]->slug; ?>">Ranking <span><?php echo $terms[0]->name; ?></span>
            <div class="ranking-nav-btn">
              <div class="customPrevBtn4"><i class="fa fa-angle-left"></i></div>
              <div class="customNextBtn4"><i class="fa fa-angle-right"></i></div>
            </div>
        </h2>

        <div class="row no-gutters">

            <div class="col-lg-8">
                <div class="slider-ranking owl-carousel">

                    <?php
                        foreach($terms as $term) { ?>

                    <div class="rankig-one" style='background:url(<?php the_field('bg_image', 'term_' .$term->term_id ); ?>) no-repeat scroll center center; background-size: cover;' data-title="<?php echo $term->slug; ?>">
                        <h3><?php the_field('title_normal', 'term_' .$term->term_id ); ?> <?php if(get_field('title_strong', 'term_' .$term->term_id )) { ?><span><?php the_field('title_strong', 'term_' .$term->term_id ); ?></span><?php } ?></h3>

            <!-- <ul class="ajax-content2"> -->

                        <?php 
                        $posts = get_field('top_players', 'term_' .$term->term_id );
                        if( $posts ): ?>
                            <ul>
                            <?php $i = '1'; foreach( $posts as $post): ?>
                                <?php setup_postdata($post); ?>
                                <li><a href="<?php the_permalink(); ?>"><?php echo $i; ?> <?php the_title(); ?></a></li>
                            <?php $i++; endforeach; ?>
                            </ul>
                            <?php wp_reset_postdata(); ?>
                        <?php endif;  ?>

                    </div>

                    <?php } ?>
<!-- </ul> -->
                </div>
            </div>

            <div class="col-lg-4">
                <div class="filters-ranking">
                    <div class="filters-search">
                        <input type="text" class="quicksearch" placeholder="Encuentra a un jugador" />
                        <i class="fa fa-search"></i>
                    </div>
                    <div class="tabs d-flex">
                        <span class="tab">Ranking</span>
                        <span class="tab">Selecciona tu estado</span>
                    </div>
                    <div class="tab_content">
                        <div class="tab_item">
                            <div class="filters-bar">

                                <select class="filters-select" name="position" onchange="this.form.submit()">
                                    <?php
                                        $field_key = "field_5c80e92663dd1";
                                        $field = get_field_object($field_key);
                                        foreach ( $field['choices'] as $k => $v ) {
                                            echo '<option value="' . $k . '">' . $v . '</option>';
                                        }
                                    ?>
                                </select>

                            </div>
                            <div class="players-results" id="ajax-content"></div>
                        </div>
                        <div class="tab_item">
              <div class="players-state">
                <ul>
                    <?php
                        $field_key = "field_5cebb7e973218";
                        $field = get_field_object($field_key);
                        foreach ( $field['choices'] as $k => $v ) {
                            echo '<li data-value="' . $k . '">' . $v . '</li>';
                        }
                    ?>
                </ul>                
              </div>      
            </div>
                    </div>
                </div>
            </div>      
        <div class="players-results" class="ajax-content2"></div>
        </div>


    </div>
</section>

 </form>

scripts.js

/*ranking filter select*/
  $(".filters-select").on("change", function() {
    ranking();
  });

  /*ranking filter search*/
  var ts = $(".quicksearch").val();
  $(".quicksearch").attr("data-search", ts);
  $(".quicksearch").keyup(function(e) {
    var ts = $(this).val();
    $(".quicksearch").attr("data-search", ts);
    ranking();
  });

  $(".filters-ranking .players-state").mCustomScrollbar({
    scrollButtons: { enable: true }
  });
  $(".players-state li").click(function() {
    var val = $(this).attr("data-value");
    $(".players-state").attr("data-state", val);
    ranking();
  });

  /*for first load*/
  function ranking() {
    $(".filters-ranking .players-results").mCustomScrollbar("destroy");
    var position = $(".filters-select option:selected").val();
    var ranking = $(".s-raking .title-bar").attr("data-ranking");
    var search = $(".quicksearch").attr("data-search");
    var state = $(".players-state").attr("data-state");

    $.ajax({
      url: ajaxurl,
      type: "post",
      data: {
        action: "players",
        position: position,
        ranking: ranking,
        search: search,
        state: state
      },
      success: function(response) {
        $("#ajax-content").html(response);
        $(".filters-ranking .players-results").mCustomScrollbar({
          scrollButtons: { enable: true }
        });
      }
    });

    $.ajax({
      url: ajaxurl,
      type: "post",
      data: {
        action: "playersmain",
        position: position,
        ranking: ranking,
        search: search,
        state: state
      },
      success: function(response) {
        $(".ajax-content2").html(response);
      }
    });
  }
  ranking();

  /*ranking filter select MLB*/
  $(".filters-select-MLB").on("change", function() {
    ranking2();
  });
  function ranking2() {
    $(".ranking-wrap .players-results").mCustomScrollbar("destroy");
    var position = $(".filters-select-MLB option:selected").val();

    $.ajax({
      url: ajaxurl,
      type: "post",
      data: {
        action: "playersMLB",
        position: position
      },
      success: function(response) {
        $("#ajax-content-MLB").html(response);
        $(".ranking-wrap .players-results").mCustomScrollbar({
          scrollButtons: { enable: true }
        });
      }
    });
  }
  ranking2();

functions.php

add_action( 'wp_ajax_nopriv_players', 'players' );
add_action( 'wp_ajax_players', 'players' );
function players() {

    $position = $_POST['position'];
    $ranking = $_POST['ranking'];
    $search = $_POST['search'];
    $state = $_POST['state'];

    $args = array(
        'post_type'  => 'players_lpm',
        'posts_per_page' => -1,
        's' => $search,
        'tax_query' => array(
            array(
                'taxonomy' => 'ranking',
                'field'    => 'slug',
                'terms'    => $ranking
            )
        ),
        'meta_query' => array(
        array( 'key' => 'position', 'value' => $position, 'compare' => 'LIKE' ),
        array( 'key' => 'state', 'value' => $state, 'compare' => 'LIKE' ),
        'relation' => 'AND'
        )
    );

    $the_query = new WP_Query( $args ); $i2 = '1';
    echo '<ul>';
    while ($the_query -> have_posts()) : $the_query -> the_post();
    echo '<li><a href="'.get_permalink().'"><span>'.$i2.'</span>'.get_the_title().'</a></li>';
    $i2++; endwhile; wp_reset_postdata();
    echo '</ul>';
    die();
}

add_action( 'wp_ajax_nopriv_playersmain', 'playersmain' );
add_action( 'wp_ajax_playersmain', 'playersmain' );
function playersmain() {

    $position = $_POST['position'];
    $ranking = $_POST['ranking'];
    $search = $_POST['search'];
    $state = $_POST['state'];

    $args = array(
        'post_type'  => 'players_lpm',
        'posts_per_page' => -1,
        's' => $search,
        'tax_query' => array(
            array(
                'taxonomy' => 'ranking',
                'field'    => 'slug',
                'terms'    => $ranking
            )
        ),
        'meta_query' => array(
            array( 'key' => 'position', 'value' => $position, 'compare' => 'LIKE' ),
            array( 'key' => 'state', 'value' => $state, 'compare' => 'LIKE' ),
            'relation' => 'AND'
        )
    );

    $the_query = new WP_Query( $args ); $i2 = '1';
    while ($the_query -> have_posts()) : $the_query -> the_post();
    echo '<li><a href="'.get_permalink().'"><span>'.$i2.'</span>'.get_the_title().'</a></li>';
    $i2++; endwhile; wp_reset_postdata();
    die();
}

The site is https://probeis.mx and the search box can be seen in the following image:

Read more here:: custom search refreshing on submit and not giving results

Leave a Reply

Your email address will not be published. Required fields are marked *