【问题标题】:how to create a custom live search in WordPress from scratch如何从头开始在 WordPress 中创建自定义实时搜索
【发布时间】:2020-07-07 16:57:40
【问题描述】:

我是 WordPress 的新手,我尝试使用 ajax 创建实时搜索,我希望当用户按下按钮时会出现一个框,并且搜索结果会显示在该框中。 为此,我在我的主题文件夹中创建了一个名为 livesearch 的文件夹,在该文件夹中我放置了一个名为 search-live.php 的文件,该文件中的代码如下所示:

<?php
//echo $_GET['search'];
$test = GetMySearchResult($_GET['search']);
print_r($test);

在我的 functions.php 文件中,我创建了一个名为 GetMySearchResult 的函数,如下所示:

function GetMySearchResult($search){
    global $wpdb;
    $myrows = $wpdb->get_results( "SELECT * FROM wp_posts post_type = post ID LIKE %" . $search . "%" );
    
    return $myrows;
}
add_action('init', 'GetMySearchResult');

我使用 ajax 和代码向search-live.php 发送数据,如下所示:

<script>
        var GetSearch = document.getElementById('search');
         GetSearch.addEventListener("keyup", function(){
             //InfoData = {slug:GetSearch.value}
             $.ajax({
                type: "GET",
                url: '<?php echo get_site_url(); ?>/wp-content/themes/webranko/livesearch/search-live.php?search=' + GetSearch.value ,
                data: '',
                datatype: "html",
                success: function(result) {
                    console.log(result);
                }
            });
         });
            
         </script>

我已经 $_GET['search']; 并且一切正常,我可以在控制台中看到结果,但是当我调用 GetMySearchResult($_GET['search']) 时,它给了我一个像这样的致命错误:


致命错误:未捕获错误:调用 C:\xampp\htdocs\web\wp-content\themes\webranko\livesearch\search-live.php:3 中的未定义函数 GetMySearchResult() 堆栈跟踪: #0 {主要} C:\xampp\htdocs\web\wp-content\themes\webranko\livesearch\search-live.php3

what我错过了还是我做错了什么?

【问题讨论】:

    标签: php wordpress wordpress-theming


    【解决方案1】:

    我相信您无法获得一种绝对的解决方案,因为您可以通过多种方式应用实时搜索。但所有这些都应该通过 JavaScript。您可以在下面找到我应用实时搜索的代码 sn-p。我知道它需要解释很多,但我希望你能阅读它并理解代码的流程,因此我可以提供一点帮助。

    以下代码的应用你可以在this网站的搜索按钮中找到它,该网站还在开发过程中所以不要担心设计,只需按下搜索按钮即可。希望我能帮上忙!

    /*
    =================================================================================
                                    LIVE SEARCH
    =================================================================================
    */
    
    // VARs =======================================================================
    
    var searchArea = $('#modal-search-input');
    var spinner = `
        <div class="search_ajax_loader">
            <svg  viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg">
                <rect y="10" width="15" height="120" rx="6">
                    <animate attributeName="height"
                         begin="0.5s" dur="1s"
                         values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                         repeatCount="indefinite" />
                    <animate attributeName="y"
                         begin="0.5s" dur="1s"
                         values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                         repeatCount="indefinite" />
                </rect>
                <rect x="30" y="10" width="15" height="120" rx="6">
                    <animate attributeName="height"
                         begin="0.25s" dur="1s"
                         values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                         repeatCount="indefinite" />
                    <animate attributeName="y"
                         begin="0.25s" dur="1s"
                         values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                         repeatCount="indefinite" />
                </rect>
                <rect x="60" width="15" height="140" rx="6">
                    <animate attributeName="height"
                         begin="0s" dur="1s"
                         values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                         repeatCount="indefinite" />
                    <animate attributeName="y"
                         begin="0s" dur="1s"
                         values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                         repeatCount="indefinite" />
                </rect>
                <rect x="90" y="10" width="15" height="120" rx="6">
                    <animate attributeName="height"
                         begin="0.25s" dur="1s"
                         values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                         repeatCount="indefinite" />
                    <animate attributeName="y"
                         begin="0.25s" dur="1s"
                         values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                         repeatCount="indefinite" />
                </rect>
                <rect x="120" y="10" width="15" height="120" rx="6">
                    <animate attributeName="height"
                         begin="0.5s" dur="1s"
                         values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
                         repeatCount="indefinite" />
                    <animate attributeName="y"
                         begin="0.5s" dur="1s"
                         values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
                         repeatCount="indefinite" />
                </rect>
            </svg>
        </div>
    `;
    var isSpinnerVisible = false;
    var previousValue, typingTimer;
    
    // Excute functions ===============================================================
    
    addSearchHTML();
    SearchBtnStyle();
    votEvents();
    
    
    
    
    // define functions ================================================================
    
    function addSearchHTML () {
        $('.mainmenu').append(`
            <div class="widget widget_search">
                    <div id="vot_search_button"></div>
            </div>
        `);
    
    
        $('#search_modal').append(`
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        <i class="rt-icon2-cross2"></i>
                    </span>
                </button>
                <div class="widget widget_search">
                    <div class="searchform search-form form-inline" >
                        <div class="form-group">
                            <input type="text" value="" name="search" class="form-control" placeholder=" ما الذي تريد أ ن تبحث عنه؟" id="modal-search-input">
                        </div>
                        <div id="inner_search_btn"></div>
                    </div>
                </div>
                <div id="result_area" class="row">
                    <fieldset id="result_area_sermons" class="search_column col-md-4 col-sm-12">
                        <legend class="search_legend">
                            عظات
                        </legend>
                        <ul class="search_column_result">
                            
                        </ul>
                    </fieldset>
                    <fieldset id="result_area_tvshows" class="search_column col-md-4 col-sm-12">
                        <legend class="search_legend">
                            برامج تلفزيونية
                        </legend>
                        <ul class="search_column_result">
                            
                        </ul>
                    </fieldset>
                    <fieldset id="result_area_articles" class="search_column col-md-4 col-sm-12">
                        <legend class="search_legend">
                            مقالات
                        </legend>
                        <ul class="search_column_result">
                            
                        </ul>
                    </fieldset>
                </div>
            `);
    
        if ($('body').hasClass('home')) {
            $('.widget_search').addClass('widget_search_homepage');
        }
    }
    
    function SearchBtnStyle () {
        var SearchBtnPadding = $('.mainmenu .menu-item > a').css('padding');
        var SearchBtnMargin = $('.mainmenu .menu-item > a').css('margin');
    
        $('#vot_search_button').css('padding', SearchBtnPadding);
        $('#vot_search_button').css('margin', SearchBtnMargin);
    }
    
    function votEvents (){
        $('#vot_search_button').on('click', openOverlay);
        $('#modal-search-input').on("keyup", typingLogic);
    }
    
    
    // event handlers functions ==========================================================
    
    function openOverlay (){
         $('#search_modal').modal('show').find('input').first().focus();
    }
    
    function typingLogic () {
        var searchArea = $('#modal-search-input'),
        resultsDivSermons = $('#result_area #result_area_sermons .search_column_result');
        resultsDivTVshows = $('#result_area #result_area_tvshows .search_column_result');
        resultsDivArticles = $('#result_area #result_area_articles .search_column_result');
    
        if (searchArea.val() != previousValue) {
          clearTimeout(typingTimer);
    
          if (searchArea.val()) {
            if (!isSpinnerVisible) {
              resultsDivSermons.html(spinner);
              resultsDivTVshows.html(spinner);
              resultsDivArticles.html(spinner);
              isSpinnerVisible = true;
            }
            typingTimer = setTimeout(getResults, 2000);
          } else {
            resultsDivSermons.html('');
            resultsDivTVshows.html('');
            resultsDivArticles.html('');
            isSpinnerVisible = false;
          }
    
        }
    
        previousValue = searchArea.val();
    }
    
    
    function getResults () {
        var searchArea = $('#modal-search-input');
    
        //sermons
        var sermons_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-sermons?search=' + searchArea.val();
        $.getJSON(sermons_url, sermons => {
          $('#result_area #result_area_sermons .search_column_result').prepend(`
                ${sermons.length ? '' : '<li>لم نستطيع العثور على عظة تطابق بحثك</li>'}
                  ${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
                ${sermons.length ? '' : ''}
          `);
          isSpinnerVisible = false;
          $('#result_area #result_area_sermons .search_ajax_loader').hide();
        });
    
        //tvshows
        var tvshows_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-tvshows?search=' + searchArea.val();
        $.getJSON(tvshows_url, sermons => {
          $('#result_area #result_area_tvshows .search_column_result').prepend(`
                ${sermons.length ? '' : '<li>لم نستطيع العثور على برنامج تلفزيوني يطابق بحثك</li>'}
                  ${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
                ${sermons.length ? '' : ''}
          `);
          isSpinnerVisible = false;
          $('#result_area #result_area_tvshows .search_ajax_loader').hide();
        });
    
        //articles
        var articles_url = vot_vars.root_directory + '/wp-json/wp/v2/vot-articles?search=' + searchArea.val();
        $.getJSON(articles_url, sermons => {
          $('#result_area #result_area_articles .search_column_result').prepend(`
                ${sermons.length ? '' : '<li>لم نستطيع العثور على مقالة تطابق بحثك</li>'}
                  ${sermons.map(item => `<li><a href="${item.link}">${votChangeNumbersToArabic(item.title.rendered)}</a></li>`).join('')}
                ${sermons.length ? '' : ''}
          `);
          isSpinnerVisible = false;
          $('#result_area #result_area_articles .search_ajax_loader').hide();
        });
    }
    

    【讨论】:

      【解决方案2】:

      要创建实时搜索,只需向wp-json 发送 GET 请求即可,无需进行新查询

      只需在 ajax 请求中使用此 URL:

      <?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value 
      

      所以ajax代码应该是这样的:

      <script>
              var GetSearch = document.getElementById('search');
               GetSearch.addEventListener("keyup", function(){
                   //InfoData = {slug:GetSearch.value}
                   $.ajax({
                      type: "GET",
                      url: '<?php echo get_site_url(); ?>wp-json/wp/v2/posts?search=' + GetSearch.value ,
                      data: '',
                      datatype: "html",
                      success: function(result) {
                          console.log(result);
                      }
                  });
               });
                  
               </script>
      

      HTML 搜索输入应该是这样的:

      <input type="search" id="search" name="search" placeholder="search" autocomplete="off"/>
      

      你必须关闭输入的自动完成

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2022-01-07
        相关资源
        最近更新 更多