Как использовать окно поиска для фильтрации сообщений из WordPress API? - PullRequest
Новая
       7

Как использовать окно поиска для фильтрации сообщений из WordPress API?

0 голосов
/ 28 марта 2020

Мне удалось получить список сообщений на веб-странице 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);
            }
                }
          });
        });

Кажется, что он просматривает каждую напечатанную букву и возвращает все сообщения для каждой буквы.

1 Ответ

0 голосов
/ 29 марта 2020

Я нашел ответ. API WordPress не позволяет фильтровать по заголовкам, но вы можете фильтровать по слагам. Таким образом, пользователь должен ввести название с дефисами (например, 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
     } 
                }
     });
     };
...