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

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({&nbsp; &nbsp; &nbsp; &nbsp; minChars: 1,&nbsp; &nbsp; &nbsp; &nbsp; source: function (term, suggest) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; term = term.toLowerCase();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var choices = [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { label: "a", value: "apple" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { label: "b", value: "boy" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { label: "c", value: "car" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var suggestions = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < choices.length; i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (choices[i].value.indexOf(term) !== -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; suggestions.push(choices[i]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; suggest(suggestions);&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; renderItem: function (item, search) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div class="autocomplete-suggestion">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<span style="color: red; margin-right: 10px">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.label +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</span>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<span>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item.value +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</span>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</div>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; });<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&nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; autocomplete="off"&nbsp; &nbsp; &nbsp; value=""&nbsp; &nbsp; &nbsp; name="s"&nbsp; &nbsp; &nbsp; class="search-autocomplete"&nbsp; &nbsp; &nbsp; id="s"&nbsp; &nbsp; &nbsp; placeholder="My Search form"&nbsp; &nbsp; />

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

&nbsp; &nbsp;function ja_ajax_search() {&nbsp; &nbsp; $results = new WP_Query( array(&nbsp; &nbsp; &nbsp; &nbsp; 'post_type'&nbsp; &nbsp; &nbsp;=> array( 'product','product-tag' ,'post_author'),&nbsp; &nbsp; &nbsp; &nbsp; 'post_status'&nbsp; &nbsp;=> 'publish',&nbsp; &nbsp; &nbsp; &nbsp; 'nopaging'&nbsp; &nbsp; &nbsp; => true,&nbsp; &nbsp; &nbsp; &nbsp; 'posts_per_page'=> 100,&nbsp; &nbsp; &nbsp; &nbsp; 's'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=> stripslashes( $_POST['search'] ),&nbsp; &nbsp; ) );&nbsp; &nbsp; $items = array();&nbsp; &nbsp; // print_r($results);&nbsp; &nbsp; if ( !empty( $results->posts ) ) {&nbsp; &nbsp; &nbsp; &nbsp; foreach ( $results->posts as $result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // $services = [$result ];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $post_details = [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'post_id' => $result->ID,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'post_author' => $result->post_author,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'post_title' => $result->post_title,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'post_status' => $result->post_status,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'post_slug' => $result->post_name&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array_push($items, $post_details);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // $items[] .= $services;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // echo $result->post_title;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; // print_r($items);&nbsp; &nbsp; // print_r($items);&nbsp; &nbsp; // print_r($items);&nbsp; &nbsp; // if ( !empty( $results->posts ) ) {&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp;foreach ( $results->posts as $result ) {&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$items[] = $result->post_status;&nbsp; &nbsp; //&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; // }&nbsp; &nbsp; wp_send_json_success( $items );&nbsp;}add_action( 'wp_ajax_search_site',&nbsp; &nbsp; &nbsp; &nbsp; 'ja_ajax_search' );add_action( 'wp_ajax_nopriv_search_site', 'ja_ajax_search' );