2017-01-30 11 views
1

Привет мне нужна вещь, как показано ниже изображения enter image description hereНа нажатие клавиши мгновенного результата, населяющие

Я реализовал код, но его просто автоматически заполнять как enter image description here

Я не в состоянии заполнить результат. Я реализовал код Google, как показано ниже

<script> 

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


<gcse:search enableautocomplete="true"></gcse:search> 

Что мне нужно, это мгновенный результат, как Google показывает

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

enter image description here

<head> 

<title></title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    <script> 

     (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> 
</head> 
<body> 
    <div class="gcse-container" id="gcse_container"> 
    <gcse:search enableautocomplete="true"></gcse:search> 
    </div> 
</body> 
+0

взглянуть на .Входной Jquery() в методе (при условии, что вы перечислили JQuery в качестве тега ...) http://stackoverflow.com/questions/17384218/jquery-input -event – Snowmonkey

+0

Далее по этой ссылке, но я также не смог http://stackoverflow.com/questions/26524620/google-site-search-catch-search-submit-and-trigger-function –

+0

Вы имели в виду, что результат будет показывать после каждого нажатия клавиши с клавиатуры? Помните, что это будет означать несколько поисковых запросов для одного поиска. Таким образом, ваша поисковая квота будет использоваться очень быстро. – Fayaz

ответ

0

Следующий фрагмент кода будет заполнить результат на каждое нажатие клавиши. Нажмите Run code snippet кнопку &, затем нажмите кнопку Full Page для лучшего обзора &, затем проверьте, удовлетворяет ли оно вашим требованиям. Он использует Google Custom Search element control API. Изучите этот документ для дальнейшей настройки.

(function($, window) { 
 
    var elementName = ''; 
 
    var lastSearchTerm = ''; 
 
    var initGCSEInputField = function() { 
 
    $('.gcse-container form.gsc-search-box input.gsc-input') 
 
     .on("keyup", function(e) { 
 
     if(e.which == 13) { 
 
     // 13 = enter, execute custom CODE as necessary on enter 
 
     console.log("Enter detected"); 
 
     } 
 
     else { 
 
     if(elementName == '') { 
 
     \t // assuming that we have only one search element on the page 
 
     \t var elements = google.search.cse.element.getAllElements(); 
 
      for(var element in elements) { 
 
      elementName = element; 
 
      if(elementName != '') { 
 
      \t break; 
 
      } 
 
      } 
 
     } 
 
     if(elementName != '') { 
 
     \t // searching on each keystroke 
 
      var searchTerm = $.trim(this.value); 
 
      if(searchTerm != lastSearchTerm) { 
 
      // console.log(searchTerm); 
 
      google.search.cse.element.getElement(elementName).execute(searchTerm); 
 
      lastSearchTerm = searchTerm; 
 
      } 
 
     } 
 
     } 
 
    }); 
 
    }; 
 
    
 
    var GCSERender = function() { 
 
    \t 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 = { 
 
    \t 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>

+0

Привет, пожалуйста, просмотрите мой обновленный ответ, здесь, в фрагменте кода, он работает очень хорошо, но поскольку я скопировал это на своей странице, он не отображает результат. при наборе «mi» snippet показывает результат, но на моей странице это не показ. Нужно ли добавить еще какой-то код, которого нет в вашем фрагменте –

+0

Нет, этот фрагмент будет работать в любом месте без дополнительного кода. Вы что-то делаете неправильно. Что произойдет, когда вы нажмете enter? Появляются ли результаты после нажатия клавиши ввода? Обновите свой вопрос с помощью КОДА, который вы используете. – Fayaz

+0

Да после нажатия на него отображает результат –