javascript - How can I auto filter a HTML selectlist? - Stack Overflow

admin管理员组

文章数量:1304960

I have a HTML select list with quite a few (1000+) names. I have a javascript in place which will select the first matching name if someone starts typing. This matching looks at the start of the item:

var optionsLength = dropdownlist.options.length;
  for (var n=0; n < optionsLength; n++)
  {
    var optionText = dropdownlist.options[n].text;
    if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0)
    {
      dropdownlist.selectedIndex = n;
      return false; 
    }
  }

The customer would like to have a suggest or autofilter: typing part of a name should 'find' all names containing that part. I've seen a few Google Suggest like options, most using Ajax, but I'd like a pure javascript option, since the select list is already loaded anyway. Pointers anyone?

I have a HTML select list with quite a few (1000+) names. I have a javascript in place which will select the first matching name if someone starts typing. This matching looks at the start of the item:

var optionsLength = dropdownlist.options.length;
  for (var n=0; n < optionsLength; n++)
  {
    var optionText = dropdownlist.options[n].text;
    if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0)
    {
      dropdownlist.selectedIndex = n;
      return false; 
    }
  }

The customer would like to have a suggest or autofilter: typing part of a name should 'find' all names containing that part. I've seen a few Google Suggest like options, most using Ajax, but I'd like a pure javascript option, since the select list is already loaded anyway. Pointers anyone?

• javascript
• asp
• autosuggest
• autofilter

Share Improve this question Follow edited Oct 14, 2011 at 5:14 BalusC 1.1m376376 gold badges3.6k3.6k silver badges3.6k3.6k bronze badges asked Oct 9, 2008 at 8:05 edosoftedosoft 17.3k2525 gold badges8080 silver badges114114 bronze badges 1

• Then you'd have to pull out elements ?-) – roenving Commented Oct 9, 2008 at 8:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Change

if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0)

to

if (optionText.indexOf(dropdownlist.keypressBuffer) > 0)

To find dropdownlist.keypressBuffer anywhere in the optionText.

The YUI libraries have a library for this sort of functionality, called AutoComplete.

The DataSource for AutoComplete can be local javascript objects, or can be easily switched to Ajax if you change your mind.

The YUI ponents are pretty customizable with a fair bit of functionality.

Edit: I'm not sure if you can get it to work with a select box as required by the question though. Might be possible.

I would set up a cache to hold the options inside my select. And instead of filtering options in the select, I would clear the select, and re-populate it with matched options.

Pseudo-code galore:

onLoad:
    set cache

onKeyPress:
    clear select-element
    find option-elements in cache
    put found option-elements into select-element

Here's a little POC I wrote, doing filtering on selects from what is selected in another select--in effect chaining a bunch of selects together.

Perhaps it can give you a few ideas:

function selectFilter(_maps)
{
    var map = {};


    var i = _maps.length + 1; while (i -= 1)
    {
        map = _maps[i - 1];


        (function (_selectOne, _selectTwo, _property)
        {
            var select = document.getElementById(_selectTwo);
            var options = select.options;
            var option = {};
            var cache = [];
            var output = [];


            var i = options.length + 1; while (i -= 1)
            {
                option = options[i - 1];

                cache.push({
                    text: option.text,
                    value: option.value,
                    property: option.getAttribute(_property)
                });
            }


            document.getElementById(_selectOne).onchange = function ()
            {
                var selectedProperty = this
                                       .options[this.selectedIndex]
                                       .getAttribute(_property);
                var cacheEntry = {};
                var cacheEntryProperty = undefined;


                output = [];

                var i = cache.length + 1; while (i -= 1)
                {
                    cacheEntry = cache[i - 1];

                    cacheEntryProperty = cacheEntry.property;

                    if (cacheEntryProperty === selectedProperty)
                    {
                        output.push("<option value=" + cacheEntry.value + " "
                        _property + "=" + cacheEntryProperty + ">" +
                        cacheEntry.text + "</option>");
                    }
                }

                select.innerHTML = output.join();
            };
        }(map.selectOne, map.selectTwo, map.property));
    }
}


$(function ()
{
    selectFilter([
        {selectOne: "select1", selectTwo: "select2", property: "entityid"},
        {selectOne: "select2", selectTwo: "select3", property: "value"}
    ]);
});

use this filter script http://www.barelyfitz./projects/filterlist/

本文标签： javascriptHow can I auto filter a HTML selectlistStack Overflow