What is the best way to design a drop-down suggestion list similar to Google's?

Question

What is the best way to design a drop-down suggestion list similar to Google's?

This question is still in the theoretical stage, but it's something I'm definitely considering for the long run. When you visit google.com and type in a search query, the site provides suggestions in a dropdown menu. I'm pretty sure they use AJAX to send the typed text and receive a list of suggestions in return. What I'm curious about is how they format and display that list. It appears to be a simple dropdown menu, similar to an HTML select element, but without the select box at the top. I'm confident that the solution is a straightforward CSS trick that separates the select box from the dropdown list it generates, or possibly using an input type other than select, but I can't seem to figure it out.

javascript ajax

Answer 1

Answer №1

Responding a bit late here, but I must say that W3schools has truly excelled in this area.

Only utilizing HTML, CSS, and Pure JavaScript. You should definitely check it out.

Here is the link: W3Schools Auto Complete

In case the link is removed, I'll include the code below for reference.

function autocomplete(inp, arr) {
  // Autocomplete function takes the text field element and an array of possible values
  var currentFocus;
  // Function executes when typing in the text field
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      // Close any existing lists of autocompleted values
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      // Create a DIV element to contain the autocompleted values
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      // Append DIV element as a child of the autocomplete container
      this.parentNode.appendChild(a);
      // Loop through array items
      for (i = 0; i < arr.length; i++) {
        // Check if item matches the input value
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          b = document.createElement("DIV");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) {
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
      });
}

var countries = ["Afghanistan","Albania", ... ]; // Array containing country names

autocomplete(document.getElementById("myInput"), countries);

* {
  box-sizing: border-box;
}
body {
  font: 16px Arial;  
}
.autocomplete {
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>     
<body>

<h2>Autocomplete</h2>

<p>Start typing:</p>

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>
</body>
</html>

Answer 2

Responding a bit late here, but I must say that W3schools has truly excelled in this area.

Only utilizing HTML, CSS, and Pure JavaScript. You should definitely check it out.

Here is the link: W3Schools Auto Complete

In case the link is removed, I'll include the code below for reference.

function autocomplete(inp, arr) {
  // Autocomplete function takes the text field element and an array of possible values
  var currentFocus;
  // Function executes when typing in the text field
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      // Close any existing lists of autocompleted values
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      // Create a DIV element to contain the autocompleted values
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      // Append DIV element as a child of the autocomplete container
      this.parentNode.appendChild(a);
      // Loop through array items
      for (i = 0; i < arr.length; i++) {
        // Check if item matches the input value
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          b = document.createElement("DIV");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) {
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
      });
}

var countries = ["Afghanistan","Albania", ... ]; // Array containing country names

autocomplete(document.getElementById("myInput"), countries);

* {
  box-sizing: border-box;
}
body {
  font: 16px Arial;  
}
.autocomplete {
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>     
<body>

<h2>Autocomplete</h2>

<p>Start typing:</p>

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>
</body>
</html>

Answer 3

Answer №2

There are a few ways you can approach this. You could utilize a select dropdown positioned directly under the input field for typing in keywords, ensuring it is styled with CSS to be absolutely positioned and have a lower z-index than the input text.

Alternatively, you could implement a more intricate solution by creating an unordered list styled to look like a dropdown. With this option, you can even include images (icons) alongside text suggestions. In this case, the ul should be positioned beneath the input field, hover effects should be created for the selected list items, and click events should be set up for each list item to populate the text input with the selected keyword and hide the list.

Hopefully, this clarifies things for you!

Answer 4

There are a few ways you can approach this. You could utilize a select dropdown positioned directly under the input field for typing in keywords, ensuring it is styled with CSS to be absolutely positioned and have a lower z-index than the input text.

Alternatively, you could implement a more intricate solution by creating an unordered list styled to look like a dropdown. With this option, you can even include images (icons) alongside text suggestions. In this case, the ul should be positioned beneath the input field, hover effects should be created for the selected list items, and click events should be set up for each list item to populate the text input with the selected keyword and hide the list.

Hopefully, this clarifies things for you!

Answer 5

Answer №3

Utilize jQuery AutoComplete for enhanced user experience:

By triggering a JavaScript event onKeyUp, an ajax request is sent with the current input value. This request is then processed by PHP to search the database for relevant keywords, returning the results to JavaScript.

JavaScript evaluates the ajax response and populates a select dropdown with the retrieved data in an absolute position.

The select dropdown includes an onClick event that transfers the selected value back to the input field.

Apologies for any language barriers, I am striving to provide a clear explanation.

Answer 6

Utilize jQuery AutoComplete for enhanced user experience:

By triggering a JavaScript event onKeyUp, an ajax request is sent with the current input value. This request is then processed by PHP to search the database for relevant keywords, returning the results to JavaScript.

JavaScript evaluates the ajax response and populates a select dropdown with the retrieved data in an absolute position.

The select dropdown includes an onClick event that transfers the selected value back to the input field.

Apologies for any language barriers, I am striving to provide a clear explanation.

What is the best way to design a drop-down suggestion list similar to Google's?

Answer №1

Answer №2

Answer №3

Similar questions

Running JavaScript within Objective-C in a Cordova plugin

Warning: ComponentMounts has been renamed. Proceed with caution

When using React Final Form, the onBlur event can sometimes hinder the

Guide to adjusting the color of Fluent UI icon when hovering with mouse?

Using Rxjs to dynamically map values from an array with forkJoin

How can I add an element to the DOM in React before the render() method is executed?

Obtain a byte array from an AngularJs controller

Switch between various chart types in Highcharts for multiple series by utilizing a dropdown menu

Obtain JSON data through an HTTP POST call

Sort a JSON object in ascending order with JavaScript

Update a particular class following an AJAX POST request in JavaScript

submit information using AJAX with jQuery

Add HTML syntax highlighting to a text area for coding purposes

Issue with jQuery.parseJSON causing empty data structure to return

Tips for tackling challenges with PHP/MySQL and utilizing Ajax, comet, or long polling techniques

transfer chosen data from a text box to a dropdown menu

Discovering the PHP error message that is sent to AJAX through JQuery

What causes the error "Failed to load SWC binary for win32/x64" when using getStaticProps?

What reasons underlie the existence of various methods for importing Modules in JavaScript?

Customizing Cell Templates in Angular UI-Grid Based on Conditions