如何使用AJAX加载Google自定义搜索内容

问题描述

我正在网站上使用Ajax来动态加载内容，而无需刷新页面。 我已经设置了一个Google自定义搜索，但是使用AJAX加载内容后，它似乎不起作用。]

https://developers.google.com/custom-search/docs/element

我是使用回调的新手，不确定是否了解它的工作方式。如果我在不调用jquery .load函数的情况下加载搜索结果，则结果将加载到页面中。但是，我想先调用.load函数，以便可以用搜索结果替换页面上的内容。

我提交以触发搜索的表单如下

                    <form class="top-search-form" id="customSearch" onsubmit="return  loadSearchContent()">
                        <input id="customSearchText" type="text" name="q" class="form-control" value=""
                            placeholder="Type &amp; Hit Enter.." autocomplete="off">
                    </form>

提交表单后，它将调用此函数以div替换当前页面内容以保存搜索结果

    function loadSearchContent()
    {
        //loads content from search.html
        $("#main-content").load("search.html #ajax-content").hide().fadeIn();

        //Prevent form from refreshing URL
        return false;
    }

我的search.html文件中HTML的正文如下所示，因此当我调用.load时，它将替换“＃ajax-content” div

    <div id="main-content">
        <div id="ajax-content" title="Search">

            <!-- Content
            ============================================= -->
            <section id="content">
                <div class="content-wrap">
                    <div class="container clearfix">

                        <gcse:searchresults-only gname="searchOnlyCSE"></gcse:searchresults-only>

                    </div>
                </div>
            </section><!-- #content end -->
            
        </div>
    </div>

然后触发Google搜索API

    //Hook a callback into the rendered Google Search. From my understanding,this is possible because the outermost rendered div has id of "___gcse_0".
    window.__gcse = {
        callback: googleCSELoaded
    };

    function googleCSELoaded() {
        // The hook in question.
        $("#customSearch").submit(function () {
            var searchText = $("#customSearchText").val();
            console.log(searchText);
            var element = google.search.cse.element.getElement('searchOnlyCSE');
            element.execute(searchText);
        })
    }

    (function () {
        var cx = '006060411120968994438:3zowy7k8s5a';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
            '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse,s);
    })();

当我触发搜索时，页面内容将替换为.load函数，但不会显示任何结果。

如果省略.load函数并添加

，则可以显示结果。

<gcse:searchresults-only gname="searchOnlyCSE"></gcse:searchresults-only>

到当前页面，但结果不会替换当前内容。老实说，我很迷茫，不知道为什么这不起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）