2000件くらいのデータをJSで検索・描画するのって現実的じゃないのかな→解決
2000件くらいのデータをJSで検索・描画するのって現実的じゃないのかな
http://d.hatena.ne.jp/rin1024/20081012/1223791309
これ解決した。
別にマルチスレッドとか全部一気に処理しなきゃいけないとか考えなきゃいいんだわ。
| てーぶる1 a b c |
てーぶる2 aa ba cb |
こんなカンジでリストが二つあって、てーぶる１のaとかbの要素にフォーカス(またはキーボードの操作でフォーカスするイベントを作るとか)した時に、左のリストにそのaとかに連想されるワードを載せる方法。
今回はフォーカスじゃなくて、キーボードの操作のほうでつまづいたんですけど、keydown(Operaだとkeypress)した際に検索処理を描画処理を同時にすると凄く重くなります(setTimeoutかませても固まらなくなるだけ)。
それは、キーボードのキーを押しっぱなしの場合a,b,c,a,b,c,ってずーっと検索→出力を繰り返そうとしてるから。
で、これを解消するにはkeydownのイベントの場合はこのエレメント選択してますよーってclassで背景だけかえといて、keyupした際に検索しょりをかませればイイトイウコト。
凄い簡単な答えでした。
…なんか全然違う方向に落ち着いたけど、とりあえず問題は解決できたのでよしとしよう。
Webのコンテンツの醍醐味(？)である、必要な要素を必要なだけを実践できたので個人的には満足です。
Webの要素でわざわざ1000件とか2000件とか一気に表示する必要ないもんね…。めんどくさいわ。
一応下記にソース晒してみます(例の場合は本当に必要ないテイドだけど)
<html>
<head>
<style type="text/css">
<!--
.selected {background-color: #880000;}
// -->
</style>
<script type="text/javascript">
<!--
var $ = function(id) {
return document.getElementById(id);
}Function.prototype.applyEventWithDOM = function(element, type, args, ignoreEvent) {
var self = this;
var _chk = function(event, args, ignoreEvent){
var ev = event || window.event;
if (ignoreEvent != true)
if (typeof args[0] !== typeof ev)
args.unshift(ev)
else if (typeof args[0] === typeof ev)
args[0] = ev
self.apply(self, args);
}
if (element.addEventListener)
element.addEventListener(type, function(event){ _chk(event, args, ignoreEvent) }, false);
else
element.attachEvent('on'+type, function(event){ _chk(event, args, ignoreEvent) });
}// リスト
var LIST = [
{
1:{'id':1, 'subject':'hogehoge1'},
2:{'id':2, 'subject':'hogehoge2'},
3:{'id':3, 'subject':'hogehoge3'},
4:{'id':4, 'subject':'hogehoge4'},
5:{'id':5, 'subject':'hogehoge5'}
},
{
1:{'id':1, 'parent_id':1, 'subject':'nulll1' },
2:{'id':2, 'parent_id':2, 'subject':'nulll2' },
3:{'id':3, 'parent_id':2, 'subject':'nulll3' },
4:{'id':4, 'parent_id':2, 'subject':'nulll4' },
5:{'id':5, 'parent_id':2, 'subject':'nulll5' },
6:{'id':6, 'parent_id':2, 'subject':'nulll6' },
7:{'id':7, 'parent_id':3, 'subject':'nulll7' },
8:{'id':8, 'parent_id':3, 'subject':'nulll8' },
9:{'id':9, 'parent_id':4, 'subject':'nulll9' }
}
];var layerID = 0;
var selectedNO = 0;// リスト作成
function makeList(key, parent_id) {
var tarElement = $('tar'+key);
var myList = LIST[key];
// リスト掃除
for (var i=tarElement.childNodes.length-1;i>=0;i--)
tarElement.removeChild(tarElement.childNodes[i]);
// リスト追加
var ul = document.createElement('ul');
ul.id = 'list'+key;
tarElement.appendChild(ul);
for (var i in myList) {
// 絞込み
if (key == 1 && parent_id != null && myList[i].parent_id != parent_id)
continue;
var list = document.createElement('li');
list.id = key + '-' + myList[i].id;
list.innerHTML = myList[i].subject;
makeList.applyEventWithDOM(list, 'mouseover', [(1-key), myList[i].id], true);
ul.appendChild(list);
}
}// 読み込み時
window.onload = function() {
makeList(0);
window.onkeydown = function(ev) {
if ($(layerID + '-' + selectedNO))
$(layerID + '-' + selectedNO).className = '';
if (ev.keyCode == 40)
if ($(layerID + '-' + (selectedNO+1)))
$(layerID + '-' + ++selectedNO).className = 'selected';
else
selectedNO = 1 , $(layerID + '-' + 1).className = 'selected';
else if (ev.keyCode == 38)
if ($(layerID + '-' + (selectedNO-1)))
$(layerID + '-' + --selectedNO).className = 'selected';
}
window.onkeyup = function() {
makeList(1-layerID, selectedNO);
}
}// -->
</script>
</head>
<body>
<div style="">
<div id="tar0" style="float:left;"></div>
<div id="tar1" style="float:left;"></div>
</div>
<div id="debug" style="clear:both;"></div>
</body>
</html>
