如何在搜索结果上添加标签？

Question

如何在搜索结果上添加标签？请检查图片以供参考我只想将两个结果与特定标题分开，我怎样才能实现这一点？这是我的代码的结果供你参考<script>  /* globals global */  jQuery(function($) {    var searchRequest;    $('.search-autocomplete').autoComplete({      minChars: 2,      source: function(term, suggest) {        try {          searchRequest.abort();        } catch (e) {}        searchRequest = $.getJSON(global.ajax, {          q: term,          action: 'search_site'        }, function(res) {          //console.log(res.data);          var suggestions = [];          res.data.forEach(x => {            console.log(x);            if (~x.post_title.toLowerCase().indexOf(term)) {              suggestions.push(x.post_title);            } else if (~x.post_status.toLowerCase().indexOf(term)) {              suggestions.push(x.post_title);            }            suggest(suggestions);          });          //  for (i=0;i<res.data.length;i++)          //       if (~res.data.post_title[i].toLowerCase().indexOf(term)) suggestions.push(res.data.post_title[i]);          //  suggest(suggestions);        });      }    });  });</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css" rel="stylesheet"/><form role="search" method="get" id="searchform" action="http://localhost/gigant-live/">  <div>    <label class="screen-reader-text" for="s">Search for:</label>    <input type="text" autocomplete="off" value="" name="s" class="form-control search-autocomplete" id="s" placeholder="My Search form" />    <input type="submit" id="searchsubmit" value="Search" />    <input type="hidden" name="post_type" value="product" />  </div></form>

Answer 1

我想你正在寻找这个。jquery/自动完成

$(".search-autocomplete").autoComplete({

        minChars: 1,

        source: function (term, suggest) {

          term = term.toLowerCase();

          var choices = [

            { label: "a", value: "apple" },

            { label: "b", value: "boy" },

            { label: "c", value: "car" },

          ];

          var suggestions = [];

          for (i = 0; i < choices.length; i++)

            if (choices[i].value.indexOf(term) !== -1) {

              suggestions.push(choices[i]);

            }

          suggest(suggestions);

        },

        renderItem: function (item, search) {

          return (

            '<div class="autocomplete-suggestion">' +

            '<span style="color: red; margin-right: 10px">' +

            item.label +

            "</span>" +

            "<span>" +

            item.value +

            "</span>" +

            "</div>"

          );

        },

      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css" rel="stylesheet"/>

<input

      type="text"

      autocomplete="off"

      value=""

      name="s"

      class="search-autocomplete"

      id="s"

      placeholder="My Search form"

    />

Answer 2

您需要创建唯一的标签集，或者可以循环遍历结果集并仅附加标签一次

var headers = [];

if(!headers.includes(section[i])){   //section will contains the lables         

    label = document.createElement("H2"); 

    label.innerHTML = section[i];

    headers.push(section[i]);            

    resultSet.appendChild(label);

}

Answer 3

   function ja_ajax_search() {

    $results = new WP_Query( array(

        'post_type'     => array( 'product','product-tag' ,'post_author'),

        'post_status'   => 'publish',

        'nopaging'      => true,

        'posts_per_page'=> 100,

        's'             => stripslashes( $_POST['search'] ),

    ) );

    $items = array();

    // print_r($results);

    if ( !empty( $results->posts ) ) {

        foreach ( $results->posts as $result) {

            // $services = [$result ];

            $post_details = [

                'post_id' => $result->ID,

                'post_author' => $result->post_author,

                'post_title' => $result->post_title,

                'post_status' => $result->post_status,

                'post_slug' => $result->post_name

            ];

            array_push($items, $post_details);

            // $items[] .= $services;

            // echo $result->post_title;

        }

    }

    // print_r($items);

    // print_r($items);

    // print_r($items);

    // if ( !empty( $results->posts ) ) {

    //     foreach ( $results->posts as $result ) {

    //         $items[] = $result->post_status;

    //     }

    // }

    wp_send_json_success( $items ); 

}

add_action( 'wp_ajax_search_site',        'ja_ajax_search' );

add_action( 'wp_ajax_nopriv_search_site', 'ja_ajax_search' );