Bookmarklet or other way to select options that contain a particular word?

[BrilliantBrilliant is verified member.]

To create a bookmarklet or script that selects <option> elements containing a particular word in a dropdown (<select>), you can use JavaScript. Here’s how to do it:


---

1. Bookmarklet Approach

Code:

javascript:(function() {

  const keyword = prompt("Enter the word to search for:"); // Ask for the keyword

  const selectElements = document.querySelectorAll("select"); // Find all <select> elements



  selectElements.forEach(select => {

    const options = Array.from(select.options);

    const matchingOption = options.find(option => option.text.toLowerCase().includes(keyword.toLowerCase()));



    if (matchingOption) {

      select.value = matchingOption.value; // Select the matching option

    }

  });



  alert(matchingOption ? `Option with "${keyword}" selected.` : `No option found with "${keyword}".`);

})();

How It Works:

1. Prompts the user for a keyword.


2. Iterates through all <select> elements on the page.


3. Finds the first <option> where the text contains the keyword (case-insensitive).


4. Selects the matching option if found.



How to Use:

1. Copy the code above.


2. Create a new bookmark in your browser.


3. Paste the code into the "URL" field of the bookmark.


4. Save the bookmark.


5. Open a webpage with a <select> dropdown, click the bookmark, and enter a keyword.




---

2. Using Console Script

If you don't want to use a bookmarklet, you can run the script directly in your browser's developer console:

Code:

const keyword = "example"; // Replace with the word you want to search for

const selectElements = document.querySelectorAll("select"); // Find all <select> elements



selectElements.forEach(select => {

  const options = Array.from(select.options);

  const matchingOption = options.find(option => option.text.toLowerCase().includes(keyword.toLowerCase()));



  if (matchingOption) {

    select.value = matchingOption.value; // Select the matching option

    console.log(`Selected: ${matchingOption.text}`);

  } else {

    console.log(`No match found in this select element.`);

  }

});

How It Works:

1. Replaces the keyword variable ("example") with the word you’re searching for.


2. Finds all <select> elements and searches their <option> tags for matches.


3. Selects the option if a match is found.




---

3. Enhanced Bookmarklet with Highlighting

If you'd like to highlight the matching options instead of selecting them, use this:

Code:

javascript:(function() {

  const keyword = prompt("Enter the word to search for:"); // Ask for the keyword

  const selectElements = document.querySelectorAll("select"); // Find all <select> elements



  selectElements.forEach(select => {

    const options = Array.from(select.options);



    options.forEach(option => {

      if (option.text.toLowerCase().includes(keyword.toLowerCase())) {

        option.style.backgroundColor = "yellow"; // Highlight matching options

      } else {

        option.style.backgroundColor = ""; // Reset others

      }

    });

  });



  alert(`Highlighted options containing "${keyword}".`);

})();





---

4. Adding to Your Website

If you want to embed this functionality into a webpage, include the following script:

<script>

  function highlightOptions(keyword) {

    const selectElements = document.querySelectorAll("select");

    selectElements.forEach(select => {

      const options = Array.from(select.options);

      options.forEach(option => {

        if (option.text.toLowerCase().includes(keyword.toLowerCase())) {

          option.style.backgroundColor = "yellow";

        } else {

          option.style.backgroundColor = "";

        }

      });

    });

  }



  // Example usage:

  const keyword = prompt("Enter the word to search for:");

  highlightOptions(keyword);

</script>





---

Customizations

1. Modify prompt() to automatically target specific <select> elements (e.g., by id or class).


2. Adjust the behavior to either select, highlight, or display the matching options in a pop-up.