リストを構成する約100,000行を含むドロップダウンがあります。
<input id="search" type="text" />
<ul>
<li>item 1</li>
<li>item 2</li>
...
<li>item 100,000</li>
</ul>
検索として機能するテキストボックスがあるので、入力すると、リスト内のアイテムへの入力と一致し、一致しないものが削除されます。これは、リスト要素の削除を実行するために作成したクラスです。
フィドルを参照してください(リストには約2000のアイテムがあります)
// requires jQuery
var Search = (function(){
var cls = function (name) {
var self = this;
self.elem = $('#' + name);
self.list = $('#' + name).next('ul').children();
self.elem.bind('keyup', function () { self.change(); });
};
cls.prototype = {
change: function () {
var self = this;
// gets the closest ul list
var typed = self.elem.val();
// only do something if there is something typed
if (typed !== '') {
// remove irrelevent items from the list
self.list.each(function () {
var item = $(this).html();
if (item.indexOf(typed) === -1) {
$(this).addClass('zero');
// tried using a class with visibility hidden
} else {
$(this).removeClass('zero');
}
});
} else {
// check what list items are 'hidden' and unhide them
self.list.each(function () {
if ($(this).hasClass('zero')) {
$(this).removeClass('zero');
}
});
}
}
};
return cls;
}());
高さ0を追加し、マージンやパディングなどを追加しないクラスを追加しているだけですが、visibility:hiddenを使用してみました。jQueryでdetachメソッドを使用してみましたが、速度の点ではほぼ同じです。
コードの問題を確認したり、最適化手法を提供したりできるJavaScriptの専門家はいますか?