How to use keyboard to navigate google search results (now that instant search is dead) [duplicate]

Solution 1:

Google have removed this feature (called Google Instant Prediction), so you can't just turn it out like you used to be able to.

I was so sad to see this feature go that I wrote a hack to re-engineer it last night. So far it only works with Google Chrome, but can be adapted to work with all the others:

1. Install Chrome extension ShortKeys.
2. Click on the ShortKeys menu and select "Options"
3. Click on "Add" and fill in the following fields:

Keyboard Shortcut: tab

Behavior: Run JavaScript

Label as: Result Picker

4. Paste the following JavaScript into the JavaScript code to run:

   document.selectedResultId=0
   function selectResult(newId){
       els = document.querySelectorAll("div.r h3")
       if(newId < 0 || newId >= els.length)
           return  //Could modify for page nav...?
       rp = document.getElementById("result-pointer")
       if(rp != null){
           rp.remove()
       }
       document.selectedResultId=newId
       el = els[newId]
       lnk = el.firstElementChild
       el.innerHTML = "<div id=\"result-pointer\" style=\"position:absolute;left:-15px;\">&gt;</div>" + el.innerHTML
       lnk.focus()
   }
   document.onkeyup=function(event){
       if(event.keyCode==38)
           selectResult(document.selectedResultId-1)
       if(event.keyCode==40)
           selectResult(document.selectedResultId+1)
       if(event.keyCode==13){
         var el = document.querySelectorAll("div.r h3")[document.selectedResultId]
         var lnk = el.parentElement
         var url = lnk.href
         if(event.ctrlKey){
           var win = window.open(url,"_blank")
           win.blur()
           window.open().close()
         }
         else{
           document.location = url
         }
       }
   }
   selectResult(0)
   

5. Configure the Activation Settings:

Active while in form fields (Checked)

Websites (Only specific sites)

URLS (one per line): *.google.*

This is what the Options page should look like

6. Click Save and then close your browser.

Instructions:

• When you restart you should see a little blue ">" appear by search results when you hit tab.

• The up/down arrow keys make it cycle through the results.

• Hitting "Enter" will navigate to the highlighted result.

• Hitting "Ctrl+Enter" to open the result in a new tab.

Happy Searching!

Solution 2:

I've created a Chrome extension that will add back the primary keyboard functionality (that I used at least). If the search box isn't focused, pressing any key will automatically focus it. In addition, arrow keys and tab/shift+tab will let you navigate between results. Hopefully this can help us remain productive until Google (hopefully) adds the functionality back.

https://chrome.google.com/webstore/detail/google-search-result-keyb/iobmefdldoplhmonnnkchglfdeepnfhd?hl=en&gl=US

Here's the code for the extension in case you want to edit it:

(function() {
  'use strict';

  var isResultsPage = document.querySelector('html[itemtype="http://schema.org/SearchResultsPage"]');
  if (!isResultsPage) {
    return;
  }

  var searchbox = document.querySelector('form[role="search"] input[type="text"]:nth-of-type(1)'),
      results = document.querySelectorAll('h3 a'),
      KEY_UP = 38,
      KEY_DOWN = 40,
      KEY_TAB = 9;

  function focusResult(offset) {
    var focused = document.querySelector('h3 a:focus');

    // No result is currently focused. Focus the first one
    if (focused == null) {
      results[0].focus();
    }
    else {
      for (var i = 0; i < results.length; i++) {
        var result = results[i];
        if (result === focused) {
          var focusIndex = i + offset;
          if (focusIndex < 0) focusIndex = 0;
          if (focusIndex >= results.length) focusIndex = results.length - 1;
          results[focusIndex].focus();
        }
      }
    }
  }

  window.addEventListener('keydown', function(e) {
    e = e || window.event;

    var isSearchActive = searchbox === document.activeElement,
        keycode = e.keyCode,
        // From https://stackoverflow.com/questions/12467240/determine-if-javascript-e-keycode-is-a-printable-non-control-character
        isPrintable = (keycode > 47 && keycode < 58)   || // number keys
                      (keycode > 64 && keycode < 91)   || // letter keys
                      (keycode > 95 && keycode < 112)  || // numpad keys
                      (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
                      (keycode > 218 && keycode < 223);   // [\]' (in order)

    if ((!isSearchActive && e.keyCode == KEY_DOWN) || (e.keyCode == KEY_TAB && !e.shiftKey)) {
      e.preventDefault();
      e.stopPropagation();
      focusResult(1); // Focus next
    }
    else if ((!isSearchActive && e.keyCode == KEY_UP) || (e.keyCode == KEY_TAB && e.shiftKey)) {
      e.preventDefault();
      e.stopPropagation();
      focusResult(-1); // Focus previous
    }
    else if (!isSearchActive && isPrintable) {
      // Otherwise, force caret to end of text and focus the search box
      searchbox.value = searchbox.value + " ";
      searchbox.focus();
    }
  });
})();

Solution 3:

As of 2017-07-31, Google removed this feature entirely from search.

I created the open source Web Search Navigator extension to fix this and add extra features (like configurable keyboard shortcuts).

See installation instructions.

Hope you find it useful, but in any case - feedback is welcome!