Пользовательский поиск Google при отправке

#javascript #search

#javascript #Поиск

Вопрос:

Я хотел бы настроить свою форму поиска. Я использую службу поиска Google, и она связана с моим доменом и так далее.

Я выбрал макет с двумя столбцами на панели управления, но, тем не менее, я хочу что-то сделать при отправке формы.

Итак, я попытался поместить actionlistener в jQuery в форму, однако не работает.

Тогда я подумал, что Google, безусловно, предоставляет что-то для этого. И да, они это делают. Он называется:

 setOnSubmitCallback()
  

http://code.google.com/apis/websearch/docs/reference.html

К сожалению, я этого не понимаю.

Пока у меня есть:

 google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});

                    function initialize()
                    {
                        var searchControl = new google.search.CustomSearchControl('017998360718714977594:j6sbtr-d6x8');
                        searchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

                        var options = new google.search.DrawOptions();
                        options.setSearchFormRoot('cse-search-form');

                        searchControl.draw('cse', options);
                    }

                    google.setOnLoadCallback(initialize);
  

Итак, у меня есть два divs:
#cse-search-form для формы и #cse для результатов

#cse находится в другом div #SearchResults, который скрыт, и вот он появляется:

Я хочу открыть #SearchResults в диалоговом окне из пользовательского интерфейса jQuery.

 $("#searchResults").dialog( { minWidth: 750, minHeight: 750 } );
  

Что приведет к:

 .setOnSubmitCallback(function() {
    $("#searchResults").dialog( { minWidth: 750, minHeight: 750 } );
} );
  

Итак, моя проблема сейчас в том, куда и на что я должен поместить setOnSubmitCallback?

Я не могу поместить его в google.search.Поиск или CustomSearchControl, как указано в документации. И я не могу вызвать это в onLoadCallback, поэтому для меня это очень странно. Не могу понять, как это сделать.

Я надеюсь, что у кого-нибудь есть больше опыта в поиске Google и он мог бы помочь мне с решением.

Заранее большое вам спасибо.

Ответ №1:

ПРИМЕЧАНИЕ: приведенный ниже код использует что-то, что Google не рекомендует. Используйте это вместо этого: http://code.google.com/apis/customsearch/v1/overview.html

 <!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Hello World - Google  Web Search API Sample</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
    //<![CDATA[
    google.load('search', '1');
    google.load("jquery", "1.5.2");
    google.load("jqueryui", "1.8.12");

    function OnLoad() {

        var searchComplete = function(searchControl, searcher){
            $('#searchResults').dialog({modal: true, width: 700, height: 400, position: [50, 50]});
            for (result in searcher.results) {
                var content = searcher.results[result].content;
                var title = searcher.results[result].title;
                var url = searcher.results[result].url;
                $('#searchResults ul')
                    .append($('<li></li>')
                        .append($('<a/>').attr('href', url).text(title))
                        .append($('<p/>').text(content)));
            }
        };

        // called on form submit
        newSearch = function(form) {
          if (form.input.value) {
            // Create a search control
            var searchControl = new google.search.SearchControl();

            // Add in a set of searchers
            searchControl.addSearcher(new google.search.WebSearch());
            searchControl.addSearcher(new google.search.VideoSearch());

            // tell the searchControl to draw itself (without this, the searchComplete won't get called - I'm not sure why)
            searchControl.draw();

            searchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);           
            searchControl.setSearchCompleteCallback(this, searchComplete);
            searchControl.execute(form.input.value);
          }
          return false;
        }

        // create a search form without a clear button
        // bind form submission to my custom code
        var container = document.getElementById("searchFormContainer");
        this.searchForm = new google.search.SearchForm(false, container);
        this.searchForm.setOnSubmitCallback(this, newSearch);
    }
    google.setOnLoadCallback(OnLoad);

    //]]>
    </script>
  </head>
  <body>
    <div id="searchFormContainer">Loading</div>
    <div id="searchResults" title="Search Results">
        <ul></ul>
    </div>
  </body>
</html>
  

Комментарии:

1. ХОРОШО — это привело бы меня к этому коду: pastebin.com/0eMBHzTh Я могу выполнять поиск, и он показывает мне мой диалог при отправке. Однако он не покажет мне результаты.

2. Хорошо, я создал полностью рабочий пример. Это немного запутанно, спасибо, что помогли мне не полениться и разобраться в этом.

3. Вау, Миллиметрический, это просто отличная работа! Я не ожидал, что кто-то это напишет. Код в порядке, и я его понимаю. Но — поскольку всегда есть «но» — Это просто поиск в Google, а не поиск на моем веб-сайте. Это не связано с поисковой учетной записью Google. Это моя главная проблема. Сейчас я иду спать, но я посмотрю на это позже сегодня и, возможно, смогу отредактировать ваш скрипт, чтобы подключить его к моей учетной записи Google для поисковой системы, которая использует мой веб-сайт для поиска. Еще раз спасибо! Я это очень ценю.

4. Я думаю, что ответом на это является просто добавление другого средства поиска. Итак, прямо сейчас он выполняет поиск видео и в Интернете, добавляя new google.search.WebSearch() и new google.search.VideoSearch() с searchControl.addSearcher помощью. Итак, чтобы выполнить поиск на вашем сайте, я думаю, просто добавьте свой ?key =YOUR-KEY при ссылке google.com/jsapi , а затем добавьте нужный поисковик (не знаю, что это такое). Эй, кстати, я тупой, но я только что понял, что это устарело. Вы должны использовать: code.google.com/apis/customsearch/v1/overview.html SearchControl.addSearcher();

5. var searchControl = new google.search.CustomSearchControl('017998360718714977594:j6sbtr-d6x8'); // Add in a set of searchers var webSearch = new google.search.WebSearch(); webSearch.setSiteRestriction("http://www.wimbledon-it.co.uk"); searchControl.addSearcher(webSearch); Должен сделать это сейчас!