Jquery: Filter dropdown list as you type

Question

I have used a prototype plugin which filters the contents of a dropdown as you type. So for example if you typed \'cat\' into the text box, only items containing the substri

Answer 1

I wrote a little script to do this a few years ago. It could be packaged up as a jQuery plug-in quite easily, probably. You're welcome to it.

I also do this in my PHP Function Reference Dashboard widget if you want to look at the code there.

Answer 2

Check these plugins:

• SexyCombo
• QuickSelect
• DropList Filter

Answer 3

I was just looking for something similar, and the best one for what I need seems to be the JQuery UI MultiSelect. It turns Multi-select boxes into a pretty slick dual-list view, with live filtering on the master list.

EDIT: New Development!

"Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors."

I'm totally using Chosen on all select-using projects in the foreseeable future.

Answer 4

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#filter *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

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

<h2>Filter</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<div class="filter-by">
  <span>Filter by:</span>
  <select class="status-filter" id="filter">
    <option value="">All</option>
    <option value="paid">Paid</option>
    <option value="accepted">Accepted</option>
    <option value="pending">Pending</option>
    <option value="rejected">Rejected</option>
    </select>
</div>

Answer 5

Try the "jquery options filter", based on real select box and matching in the mid of option texts: http://plugins.jquery.com/project/jquery_options_filter

for diyism

Answer 6

jQuery autocomplete plugin

EDIT: I initially linked to the wrong autocomplete plugin.