次のような html 構造を持つユーザー アセットのリストを返す php 生成ページのコンテンツを読み込んでいます。
動的に生成されたすべての html を含めるように更新されました。
<div id='list'>
<div id='asset12345' class='asset'>
<div class='assetName'>Someform of asset</div>
</div>
// repeat .asset block as many times as needed.
</div>
ページがユーザーに表示されたらできるようにしたいのは、ユーザーが入力ボックスに入力したときにアイテムをフィルタリングすることです。
同じドキュメントでリストを作成するだけでこれが機能しますが、ロードされたデータで試してみるとすぐに失敗します。
ここに私がこれまでに持っている完全なコードがあります。私はおそらくそれのハッシュを作成しました。
(function ($) {
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function listFilter(filter, list) {
// creates the input element.
var form = $("<form>").attr({"class":"filterform","action":"#"}),
input = $("<input>").attr({"class":"filterinput centered","type":"text","value":"Type To Filter"}),
$(form).append(input).appendTo(filter);
// checking for the user typing
$(input)
.change( function () {
var filter = $(this).val();
if(filter) {
$(list).find(".assetName:not(:Contains(" + filter + "))").parent().slideUp('fast');
$(list).find(".assetName:Contains(" + filter + ")").parent().slideDown('fast');
} else {
$(list).find(".asset").slideDown();
}
return false;
})
.keyup( function () {
$(this).change();
});
}
$(function () {
listFilter($("#filter"), $("#list"));
});
// display a link for the user.
$(".asset")
.click( function() {
var assid = $(this).id();
if (assid.length > 5) {
var wish = "&wish=true";
}
$("#link_display").load("getuser.php?ass_id=" + assid + wish);
});
}(jQuery));
$(document).ready(function(){
// loading up the initial page
$("#wrap").load("getuser.php");
// just removing initial value from the input on focus
$(".centered").focus(function(){
if(this.value == 'Type To Filter') {
this.value = '';
}
});
});