Поиск по сайту Google перехватывает поисковый запрос и запускает функцию

У меня есть страница только с окном поиска, предоставленным Google

    <gcse:search></gcse:search>

Теперь, когда я ввожу поле поиска и нажимаю Enter, я хочу, чтобы мой скрипт запускался по мере возврата результатов поиска.

Вещи, которые я пробовал

Здесь я попытался использовать событие отправки для запуска моего скрипта.

    $(document).on('submit', 'input', function(e) {
        alert('trig');
    }

Здесь я пытался поймать клавишу ввода, так как я убрал кнопку поиска

    $(document).keypress(function(e) {
        alert('triggered');
    });

Здесь я попытался поймать фокус на идентификаторе формы

    $('#gsc-i-id1').focus().trigger(function(e) {
        alert('triggered');
    });

Все неудачно

Вот список идентификаторов и классов, которые создает тег gcse.

    #___gcse_0
    .gsc-control-cse .gsc-control-cse-en
    .gsc-control-wrapper-cse
    .gsc-search-box .gsc-search-box-tools
    .gsc-search-box
    .gsc-input
    #gsc-iw-id1
    #gs_id50
    #gs_tti50
    #gsc-i-id1

javascript jquery google-custom-search
person Ernie    schedule 23.10.2014    source источник
comment
Попробуйте делегировать, как в $(document).on("keypress", "#gsc-i-id1", function(){alert("T")}). Как и в вашем первом примере, просто я не думаю, что input submit используется   -  person JNF    schedule 23.10.2014
comment
Это захватывает ключ и запускает событие. Как мне запустить его только при нажатии кнопки ввода? $(document).on(keypress, #gsc-i-id1, function(e){if(e == 13) { alert(T)}}) ???   -  person Ernie    schedule 23.10.2014
comment
if ( event.which == 13 ) { alert("T"); }. Документация предлагает keyup лучшее для такой функции (работает так же, просто измените название события) .   -  person JNF    schedule 26.10.2014
comment
Кроме того, рассмотрите возможность использования event.preventDefault();, если вы хотите вызвать что-то еще в том же событии.   -  person JNF    schedule 26.10.2014
comment
Вы хоть нашли ответ на это?   -  person Forxs    schedule 24.01.2017
comment
Любой ответ на это?   -  person    schedule 30.01.2017
comment
@Xtremcool - у вас есть jsfiddle, воспроизводящий эту проблему?   -  person NateW    schedule 31.01.2017
comment
@NateW Я пытался поместить ссылку на другую скрипту js, но для этого я не могу автоматически заполнить результат. Я просто могу заполнить текст поиска   -  person    schedule 31.01.2017
comment
@NateW то, что мне действительно нужно, находится в этой ссылке stackoverflow.com/questions/41940316/   -  person    schedule 31.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Используя следующий фрагмент КОДА, вы сможете зафиксировать событие клавиатуры при нажатии клавиши enter в поле поиска input и событие мыши click при поиске button.

Примечание. Этот ответ фиксирует только события ввода с клавиатуры и нажатия кнопки поиска (как задано в исходном вопросе). Я добавил другой ответ, который похож, но также автоматически повторно заполняет результаты поиска при каждом допустимом нажатии клавиши.

(function($, window) {
  var elementName = '';
  var initGCSEInputField = function() {
    $( '.gcse-container form.gsc-search-box input.gsc-input' )
      .on( "keyup", function( e ) {
      if( e.which == 13 ) { // 13 = enter
        var searchTerm = $.trim( this.value );
        if( searchTerm != '' ) {
          console.log( "Enter detected for search term: " + searchTerm );
          // execute your custom CODE for Keyboard Enter HERE
        }
      }
    });
    $( '.gcse-container form.gsc-search-box input.gsc-search-button' )
      .on( "click", function( e ) {
      var searchTerm = $.trim( $( '.gcse-container form.gsc-search-box input.gsc-input' ).val() );
      if( searchTerm != '' ) {
        console.log( "Search Button Click detected for search term: " + searchTerm );
        // execute your custom CODE for Search Button Click HERE
      }
    });
  };
  
  var GCSERender = function() {
  	google.search.cse.element.render({
        div: 'gcse_container',
        tag: 'search'
      });
      initGCSEInputField();
  };
  
  var GCSECallBack = function() {
    if (document.readyState == 'complete') {
      GCSERender();
    }
    else {
      google.setOnLoadCallback(function() {
        GCSERender();
      }, true );
    }
  };
  
  window.__gcse = {
  	parsetags: 'explicit',
    callback: GCSECallBack
  };
})(jQuery, window);

(function() {
  var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
  gcse.src = 'https://www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gcse-container" id="gcse_container">
  <gcse:search enableAutoComplete="true"></gcse:search>
</div>

Приведенный выше фрагмент КОДА использует API управления элементами пользовательского поиска Google.

person Fayaz    schedule 31.01.2017
comment
Постараюсь и дам вам знать - person ; 31.01.2017
comment
Можете ли вы дать мне только 1 пример с кодом, где при вставке текста результат поиска автоматически заполняется? - person ; 31.01.2017
comment
Я не понимаю вашего вопроса, можете объяснить? - person Fayaz; 31.01.2017
comment
не могли бы вы просмотреть эту ссылку? Я хочу, чтобы это было сделано "> stackoverflow.com/questions/41940316/ Не знаю, как добиться - person ; 31.01.2017