How to Search and Select in Huge Dropdowns Instantly (Chrome Hack)

Have you ever worked on a government portal or data entry website where you had to select a name from a dropdown containing thousands of entries? It is incredibly frustrating to scroll down endlessly just to find one name, like "Rajesh Kumar".

To make matters worse, standard keyboard search doesn't always work on modern websites, and Google Chrome blocks you from pasting scripts into the DevTools Console for security reasons.

In this article, we’ll show you a 100% safe, fast, and no-code-required trick to add a search box right above every dropdown on any webpage instantly.

The Problem with Huge Dropdowns

When a web page loads thousands of staff members, panchayats, or districts, the dropdown list becomes laggy. Trying to find a single entry manually can take minutes per form. Standard search plugins can be heavy or complex to configure, and copy-pasting code into the browser console is blocked by default in modern browser versions to prevent self-XSS attacks.

The Solution: The "Super Search" Bookmarklet

A bookmarklet is a normal browser bookmark that runs a tiny piece of JavaScript when clicked. It is completely safe, does not require installing heavy Chrome extensions, and bypasses the Chrome console's "allow pasting" restriction.

Step-by-Step Guide to Enable Search in Any Dropdown

Here is how you can set it up in under 60 seconds:

Step 1: Create a Bookmark

1. Open Google Chrome.
2. Press Ctrl + D (or Cmd + D on Mac) to bookmark the current page.
3. Click on the More or Edit button in the bookmark popup.

Step 2: Edit the Bookmark Details

1. Change the Name to: 🔍 Search Dropdowns
2. Clear the URL field completely and paste the following code block into it:

Step 3: Use it on Any Website!

1. Go to the website where you have the large dropdown.
2. Click on the 🔍 Search Dropdowns bookmark from your Bookmarks Bar.
3. Boom! A green-bordered search box will appear above every dropdown on the page.
4. Simply type the name you are looking for, and the dropdown will automatically filter and select it.

How the Code Works under the Hood

For advanced users and developers, here is the formatted, readable version of the bookmarklet code:

// Find all <select> elements on the page
var selects = document.querySelectorAll('select');
if (selects.length === 0) {
    alert('No dropdown found on this page!');
    return;
}

selects.forEach(function(s) {
    // Avoid adding duplicate search boxes
    if (s.previousElementSibling && s.previousElementSibling.getAttribute('data-search') === 'true') {
        return;
    }
    
    // Create the search input box
    var i = document.createElement('input');
    i.setAttribute('data-search', 'true');
    i.placeholder = 'Type to search...';
    i.style.padding = '6px';
    i.style.margin = '5px 0';
    i.style.width = '95%';
    i.style.border = '2px solid green';
    i.style.borderRadius = '4px';
    
    // Filter options dynamically on input
    i.oninput = function() {
        var val = i.value.toUpperCase();
        Array.from(s.options).forEach(o => {
            var match = o.text.toUpperCase().includes(val);
            o.style.display = match ? '' : 'none';
            if (match && val !== '') {
                s.value = o.value;
                s.dispatchEvent(new Event('change'));
            }
        });
    };
    
    // Insert the search box right before the dropdown
    s.parentNode.insertBefore(i, s);
});
                    

Try this simple browser hack today and save hours of manual data entry work! Share this trick with your colleagues who do data entry work on government and enterprise portals.