如何在搜索結果中添加 label？

Question

如何在搜索結果中添加 label？ 請查看圖片以供參考我只想將兩個結果與特定標題分開我該如何實現？

這是我的代碼的結果

供你參考

 <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

你可以參考這個鏈接https://www.w3schools.com/code/tryit.asp?filename=GDVHXVFNHD08

您需要制作唯一的標簽集，或者您可以循環遍歷結果集和 append 和 label 一次

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' );