JSFiddle - React, Tailwind, and code Playground

by Vetrivel Samidurai

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Dynamic Dropdown Selection with jQuery</title>
</head>
<body>

<input type="text" id="textBox" placeholder="Enter value">
<select id="myDropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<script>

</script>

</body>
</html>

JavaScript

$(document).ready(function() {
  // Attach an input event handler to the textbox
  $("#textBox").on("keyup", function() {
    // Get the entered value
    var enteredValue = $(this).val().toLowerCase(); // Consider case-insensitive matching

    // Find the option with the matching value and select it
    $("#myDropdown option").filter(function() {
      return $(this).text().toLowerCase() === enteredValue;
    }).prop("selected", true);
  });
});