2

かなりの数（1000以上）の名前を持つHTML選択リストがあります。誰かが入力を開始した場合に最初に一致する名前を選択するJavaScriptを用意しています。このマッチングは、アイテムの先頭を確認します。

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; 
    }
  }

顧客は提案または自動フィルターを希望しています。名前の一部を入力すると、その部分を含むすべての名前を「検索」する必要があります。私はいくつかのGoogleサジェストのようなオプションを見てきましたが、ほとんどがAjaxを使用していますが、選択リストはとにかくすでにロードされているので、純粋なjavascriptオプションが欲しいです。ポインタは誰ですか？

4

4 に答える 4

2

変化する

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

に

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

dropdownlist.keypressBuffer内の任意の場所を検索するには、 optionText.

于 2008-10-09T08:23:09.197 に答える
2

options内部にキャッシュを保持するように設定しselectます。でフィルタリングoptionsする代わりにselect、 をクリアしてselect、一致する を再入力しoptionsます。

豊富な疑似コード:

onLoad:
    set cache

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

これは私が書いた小さな POC でselects、別のオブジェクトで選択されたものからフィルタリングを行います。つまりselect、一連の選択を連鎖させます。

おそらく、いくつかのアイデアが得られるでしょう。

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"}
    ]);
});
于 2008-10-09T09:40:41.070 に答える
2

YUI ライブラリには、AutoCompleteと呼ばれるこの種の機能用のライブラリがあります。

AutoComplete の DataSource は、ローカルの JavaScript オブジェクトにすることも、気が変わった場合は簡単に Ajax に切り替えることもできます。

YUI コンポーネントはかなりカスタマイズ可能で、かなりの機能があります。

編集：ただし、質問で必要な選択ボックスで動作させることができるかどうかはわかりません。可能かもしれません。

于 2008-10-09T09:53:37.190 に答える
1

このフィルタースクリプトを使用して ください http://www.barelyfitz.com/projects/filterlist/

于 2010-06-23T00:12:56.423 に答える