Google Search Box w/ drop-down with suggestions

google-search-box-w-drop-down-with-suggestions.markdown

Google Search Box w/ drop-down with suggestions

A Pen by Zed Dash on CodePen.

License.

index.html

<!--
   Made for @lorenzo_leuzzi

   Google Search Box with drop-down suggestions, type in something and use arrow keys to select one, enter to search
-->

<div class="inputContainer">
   <form action="/results">
      <input type="search_query" id="searchbox">
   </form>
   <div class="dropdown"></div>
</div>

script.js

/*
 *  You can cut out a whole bunch of this, just fluff for everything
 */




var settings = {
   maxShownResults: 5, //Show no more than this many results

   generated: {
      // Don't touch these
      lock: false,
      original: "",
      shown: 0,
      selected: -1,
      results: []
   }
};

$("#searchbox").keyup(function(e) {
   if ($(this).val() == "") { //If there is nothing in the search box then ensure no suggestions are showed
      $(".dropdown").html("");
   }
   switch (e.keyCode) {
      case 38: //up
         settings.generated.selected = Math.max(
            -1,
            settings.generated.selected - 1
         );//take 1 but make sure it doesn't go below -1 (none selected)
         
         ShowSelected(); //Show the selection highlight and put text into the searchbar
         break;
      case 40: //down
         settings.generated.selected = 
            Math.min(
            settings.generated.shown - 1, 
            settings.generated.selected + 1
         );//add 1 but make sure it doesn't go above the suggestion count
         
         ShowSelected(); //Show the selection highlight and put text into the searchbar
         break;
      default:
         if (settings.generated.original != $(this).val()) { //If it isn't up or down and the string is different then generate a new bunch of suggestions
            settings.generated.original == $(this).val();
            ShowResults($(this).val());
         }
         break;
   }
});

function ShowSelected() {
   $("#searchbox").val( //Make the search bar show the selected text
      settings.generated.results[Math.max(0, settings.generated.selected)]
   );
   $(`.dropdown>.result`).removeClass("selected"); //remove selected effect from all
   $(`.dropdown>.result:nth-child(${settings.generated.selected+1})`).addClass("selected"); //add selected effect to one
}

$(document).on("click", ".dropdown>.result", function() { //On suggestion click
   $("#searchbox").val($(this).attr("plain"));
   ShowResults($(this).attr("plain"));
});

function ShowResults(query) { //This will generate ssuggestions based on a query
   if (settings.generated.lock) return; //Don't pass if locked
   settings.generated.lock = true; //lock
   $.ajax({
      url: `//suggestqueries.google.com/complete/search`, //Caution: this is not the official API but it is easy, this may break
      data: {
         client: "firefox", //odd behaviour with other clients
         ds: "yt",
         q: escape(query.replace(/ /g, '+'))
      },
      dataType: "jsonp", //JSONP
      Method: "GET",
      success: function(data) {
         var result = data[1]; //Just get the array of results
         const regex = new RegExp(query, "i"); //Create a regex pattern of the query case insensitive
         const subst = `<b>${query}</b>`; //Replace the query with a bold query
         var html = ""; //blank html which will be appended
         var offset = 0; //offset if results are skipped
         settings.generated.results = []; //results that are listed
         for (
            var i = 0;
            i < Math.min(settings.maxShownResults, result.length) + offset;
            i++
         ) { //loop maxShownResults or less if there are less results available
            //for some reason there are many results which are the same word twice - this just ignores them
            if (
               result[i].toLowerCase().split(" ")[0] ==
                  result[i].toLowerCase().split(" ")[1] &&
               result[i].toLowerCase().split(" ").length == 2
            ) {
               offset++; //allow for skipping one
            } else {
               settings.generated.results[settings.generated.results.length] = result[i]; //add result to list
               html +=
                  `<div class="result" plain="${result[i]}">` +
                  result[i].replace(regex, subst) +
                  `</div>`; //html for a suggestion
            }
         }
         settings.generated.shown = settings.generated.results.length //number of selections
         settings.generated.selected = -1; //reset selected
         $(".dropdown").html(html); //set html of dropdown to what was generated
      }
   });
   settings.generated.lock = false; //unlock
}

console.clear();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

* {
   font-family: sans-serif;
}

.inputContainer {
   position: relative;
   width: 250px;
   input {
      background-color: #e6e9ed;
      border: 1px solid #ccd1d9;
      padding: 4px;
      outline: none;
      width: 100%;
   }
   .dropdown {
      position: absolute;
      top: 100%;
      width: 100%;
      .result {
         width: 100%;
         padding: 4px;
         background-color: #f5f7fa;
         border-left: 1px solid #e6e9ed;
         border-right: 1px solid #e6e9ed;
         cursor: pointer;
         &:last-child {
            border-bottom: 1px solid #e6e9ed;
         }
         &:hover, &.selected {
            background-color: #37bc9b;
         }
      }
   }
}