如何使用ajax在输入字段中搜索精确的短语或单词?

时间:2017-04-09 17:09:33

标签: ajax wordpress

我已经following this并且它的工作几乎完美但是它不仅找到了与我们在输入字段中写的相同的单词的标题帖子,而且它找到了所有帖子,无论如何。

HTML

<input name="usp-title" id="usp-title" type="text" value="" data-required="true" required="required" maxlength="99" placeholder="Type here..." class="usp-input usp-input-title form-control">

AJAX

add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>

<script type="text/javascript">

function fetch(){
        console.log(jQuery('#usp-title').val());
        jQuery.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'post',
            data: { action: 'data_fetch', exactwords:  jQuery('#usp-title').val() },
           success: function(data) {
            var text1;
            var text1B;
            var text2;
            var text2B;
            jQuery("#datafetch").html(data).promise().done(function(){
            text1 = jQuery("#datafetch").find("h2").find("a").html();
            text1B = text1.toLowerCase();
            text2 = jQuery('#usp-title').val();
            text2B = text2.toLowerCase();
            console.log(text1B);
            console.log(text2B);
            if (text1B != text2B) {
                jQuery("#componi").removeAttr("disabled", "disabled").show();
                jQuery("#fatto").hide();
                //jQuery('#datafetch').empty();
            } else if (text1B == text2B) {
                jQuery("#componi").attr("disabled", "disabled").hide();
            }
         });
            }
        });
}
</script>

PHP

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => 1, 's' => esc_attr( $_POST['usp-title'] ), 'post_type' => 'post' ) );
    if( $the_query->have_posts() ) : ?> 
       <div class="jumbotron">
        <h4>Abbiamo trovato già delle lezioni con lo stesso titolo,<br>usa una di questa o scrivi un titolo diverso.</h4>
    </div>
       <ul class="list-unstyled margin-top-80">
        <?php while( $the_query->have_posts() ): $the_query->the_post(); ?>
           <li>
        <?php $time = usp_get_meta(false, 'usp-custom-10'); ?>
        <?php $space = usp_get_meta(false, 'usp-custom-3'); ?>
        <?php $spaceB = usp_get_meta(false, 'usp-custom-7'); ?>
            <h2><a target="_blank" href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>
            <p><strong>Spazio:</strong> <?php echo $space;?> <?php echo $spaceB; ?></p>
         <p><strong>Tempo:</strong> <?php echo $time; ?></p>
         <?php the_excerpt(); ?>
           </li>
        <?php endwhile;
        wp_reset_postdata(); ?>
      </ul>
    <?php endif;

    die();
}

如何将结果限制为仅与输入字段中的文字具有相同标题的结果?

1 个答案:

答案 0 :(得分:0)

这更像是一个黑客,但我找不到任何其他方法,尝试exact= "true"sentence="true"作为查询中的参数但仍然,我的所有结果不仅仅是完全匹配的。因此,由于我将结果作为list,我正在检查DOM并删除与.val()不完全匹配的任何内容

function fetch(){
  jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: { action: 'data_fetch', exactwords:  jQuery('#usp-title').val() },
    success: function(data) {
      var text2;
      var text2B;
      text2 = jQuery('#usp-title').val();
      text2B = text2.toLowerCase();
      jQuery("#datafetch").html(data).promise().done(function(){
        jQuery("#datafetch ul li h2 a").each(function() {
          var $this = jQuery(this);
          if ($this.text().toLowerCase() !== text2B) {
            $this.parent().parent().remove();
            jQuery(".jumbotron").remove();
            jQuery("#componi").removeAttr("disabled", "disabled").show();
          } else if ($this.text().toLowerCase() == text2B) {
            jQuery("#componi").attr("disabled", "disabled").hide();
          }
        });
      });
    }
  });
}