Adding a Google Search Box

Question

On Sharepoint Online I have created a code snippet and have this code in it:

<div align="center">
  <input type="text" onKeyDown="if(event.keyCode==13) doSearch();" id="SearchQuery" size="100">
  <br/><br/>
  <button type="button" onclick="javascript:doSearch();">Search</button>
</div>

<script type="text/javascript">
    function doSearch(){
        var theSearchQuery = document.getElementById('SearchQuery');
        var theURLToGoTo =  "https://www.google.com/webhp?#q=" + theSearchQuery.value;
        window.location= theURLToGoTo;
    }
</script>

It works great when you type something in the search box and you click the button with the mouse pointer. As in, it opens the Google screen with the search from the text box in the right place. I.e. it does the Google Search. However, when you enter something in the textbox and press enter instead of running the script, it for some reason opens up the edit function of the Sharepoint page?

UPDATE The code works perfectly if on a blank HTML page. Is it because Sharepoint Online blocks the onKeyDown or something?

Answer 1

What's happening is that the OOTB Submit handler for the page is getting in the road.

You can add some script like this to disable the enter key firing the submit action for the page. Fair warning: I've not tested this beyond verification that it fixes your problem, unintended consequences may abound.

<script type="text/javascript">
function stopSumbitOnEnter(evt) { 
var evt = (evt) ? evt : ((event) ? event : null); 
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
if ((evt.keyCode == 13) && (node.type=="text")) {return false;} 
} 

document.onkeypress = stopSumbitOnEnter; 
</script>
<div align="center">
<input type="text" onKeyDown="if(event.keyCode==13) doSearch();" id="SearchQuery" size="100">
<br/><br/>
<button type="button" onclick="javascript:doSearch();">Search</button>
</div>

<script type="text/javascript">
function doSearch(){
    var theSearchQuery = document.getElementById('SearchQuery');
    var theURLToGoTo =  "https://www.google.com/webhp?#q=" + theSearchQuery.value;
    window.location= theURLToGoTo;
}
</script>

Disable script lifted from: http://webcheatsheet.com/javascript/disable_enter_key.php

Answer 2

This code is working for me:

$(document).ready(function(){
// check if enter button is pressed and then search button clicked event is called
    $('#txtSearch').keypress(function(e){
      if(e.keyCode==13)
      $('#btnSearch').click();
       return 1;
    });
});

Answer 3

Okay, I found a possible solution. Try this code:

<script type="text/javascript">
function noenter() { 
return !(window.event && window.event.keyCode == 13); }
</script>
<div align="center">
<input type="text" onKeyDown="if(event.keyCode==13) doSearch();" id="SearchQuery" size="100">
<br/><br/>
<button type="button" onclick="javascript:doSearch();">Search</button>
</div>

<script type="text/javascript">
function doSearch(){
    var theSearchQuery = document.getElementById('SearchQuery');
    var theURLToGoTo =  "https://www.google.com/webhp?#q=" + theSearchQuery.value;
    window.location= theURLToGoTo;
}
</script>

Answer 4

Jim, you were close enough. You were only missing a return false.

<input type="text" onKeyDown="if(event.keyCode==13) { doSearch(); return false; }" id="SearchQuery" size="100">
<button type="button" onclick="javascript:doSearch();">Cerca con Google</button>
<script type="text/javascript">
function doSearch(){
    var theSearchQuery = document.getElementById('SearchQuery');
    var theURLToGoTo =  "https://www.google.com/webhp?#q=" + theSearchQuery.value;
    window.open(theURLToGoTo);
}
</script>