任何与jQuery 1.3兼容的插件，都可以使用用户文本输入加上基于匹配的输入字符串数进行分组来过滤下拉列表

Question

Just wanted to know if there already is plugin for this, otherwise I am going to code myself. Following is my exact requirement.

Say I have a dropdown list like this -

<select id="values" name="country">
  <option value="1">Hello world</option>
  <option value="2">Hello there</option>
  <option value="3">Hello again</option>

  <option value="4">Andorra</option>
  <option value="5">Argentina</option>
  <option value="6">Armenia</option>
  <option value="7">Aruba</option>
  <option value="8">Australia</option>
  <option value="9">Austria</option>
  ...
</select>

And there is an input field for the user to filter the dropdown contents. So it looks like this in the beginning -

Use Cases (Requirements)

Obvious case of single word entry -> User enters "Hello"

Result should have only options containing "Hello"

<select id="values" name="country">
      <option value="1">Hello world</option>
      <option value="2">Hello there</option>
      <option value="3">Hello again</option>
</select>

When Multiple words entered -> eg "Hello again", OR logic should be applied on the options and options containing any of the words should be remaining.

<select id="values" name="country">
  <option value="3">Hello again</option>
  <option value="2">Hello there</option>
  <option value="1">Hello world</option>      
</select>

A further enhancement which I am looking for is to group the results on the basis of number of words matched, all words matches at the top, followed by lesser words matches till the end, something like this -

I know this is a very specific requirement, but still gave a try...

I checked this question Jquery: Filter dropdown list as you type and some plugin demos given there, but did not find exactly what I am looking for. The first part JQuery UI MultiSelect has the OR search logic I am looking for, but without the grouping. But that needs jquery 1.5 and the older version which works with jquery 1.3 does not have the input field.

Answer 1

My honest opinion would be that the best route here would be to write your own custom code for this problem. jQuery (use 1.6 by the way) is very powerful and can solve your issue but finding a specific plugin which meets your needs exactly is unlikely.

Maybe you should take an already existing plugin such as:

http://docs.jquery.com/Plugins/autocomplete

and then reconfigure it to show the results in the way you want. Then publish your code back to the community and help to add to the rich collection of plugins available.

Just a thought.