Question

我已经能够在php网页上（WordPress之外）获得帖子列表。如何使用搜索框按博客标题（搜索字词）过滤现有结果。

这是我的搜索框


    <div class="sbox">
            <h4>Search blog by title</h4>
              <div class="form-group ">
                <input type="text" name="search_box" id="search_box" class="form-control" placeholder="Search by title, author or category" >
              </div>
            </div>

这是我的ajax尝试


    $('#search_box').keyup(function(){
          var text = $('#search_box').val();
          var api_url_search = `http://example.com/wordpress/wp-json/wp/v2/posts?filter[s]=${text}`;

           $.ajax({
            url:api_url_search,
           dataType: 'json',
                success: function(response){
                   var len = response.length;
                    for(var i=0; i<len; i++){
                        var title = response[i].title.rendered;
                        var search_str =
                         '<li>'+                     
                         '<p>' + title + '</p>' +                    
                           '</li>'           
                            ; 
              $('#results').append(search_str);
            }
                }
          });
        });

似乎正在遍历输入的每个字母，并返回每个字母的所有帖子。

Answer 1

我找到了答案。 WordPress API无法让您按标题过滤，但可以按段过滤。因此，用户必须输入带连字符的标题（例如my-title）


    //setup before functions
    var typingTimer;                //timer identifier
    var doneTypingInterval = 5000;  //time in ms (5 seconds)



    //on keyup, start the countdown
    $('#search_box').keyup(function(){
        clearTimeout(typingTimer);
        if ($('#search_box').val()) {  
          var text = $('#search_box').val();    
            typingTimer = setTimeout(doneTyping(text), doneTypingInterval)
        }
    });

    //user is "finished typing," do something
    function doneTyping (text) {


        // var text = text;

          var api_url_search = `http://examle.com/wordpress/wp-json/wp/v2/posts?slug=${text}`;

           $.ajax({
            url:api_url_search,
           dataType: 'json',
                success: function(response){
                     var len = response.length;                     
    for(var i=0; i<len; i++){
                        var id = response[i].id;
                        var date = response[i].date_gmt;
                        var slug = response[i].slug;
                        var excerpt = response[i].excerpt.rendered;
                        var categories = response[i].categories;

                        var search_str =
                         '<td>'+
                        '<div class="card" style="width: 300px;">' +
                         '<div class="card-divider">' + (i+1) + ' ' + slug + '</div>' +    

                        ' <div class="card-section">' +   
                         '<p>' + excerpt + '</p>' +
                         '<h4>' +  date + '</h4>' +
                         '<h4>' + 'Category:' + categories + '</h4>' +
                        '<a href="http://example.com/api-posts.php?">'+ 
                        '<input type="button" value="read more">' + '</input>' +
                        ' </a>' +
                        ' </div>' +
                         '</div>'+
                           '</td>'           
                            ;

             $('#results').empty().append(search_str); // empty previous results and append new results
     } 
                }
     });
     };

如何使用搜索框过滤来自WordPress API的帖子？

1 个答案: