过滤Facebook graph api提取的好友列表（更像是JavaScript/Jquery问题，而不是Facebook api问题）

您好，这里是JavaScript和Jquery大师，我使用以下代码获取并显示facebook用户的好友列表：

  <script>
function getFriends(){
var theword = '/me/friends';
FB.api(theword, function(response) {
  var divInfo = document.getElementById("divInfo");
  var friends = response.data;
  divInfo.innerHTML += '<h1 id="header">Friends/h1><ul id="list">';
  for (var i = 0; i < friends.length; i++) {
    divInfo.innerHTML += '<li>'+friends[i].name +'</li>';
   }  
  divInfo.innerHTML += '</ul></div>';  
 });
} 

</script>

<a href="#" onclick="getFriends(); return false;">graph friends</a> 
<div id = divInfo></div>

函数getFriends（）{
var theword='/me/friends'；
api（单词、函数（响应）{
var divInfo=document.getElementById（“divInfo”）；
var friends=response.data；
divInfo.innerHTML+='Friends/h1>
；
for（var i=0；i'；
}  
divInfo.innerHTML+='
'；
});
} 

现在，在我的Facebook集成网站上，我最终希望我的用户选择他们的朋友并给他们发送礼物/Facebook punch…或其他任何东西。因此，我试图使用这段使用DOM进行操作的代码实现一个简单的

     <script> 

(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };


  function listFilter(header, list) { // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          // this finds all links in a list that contain the input,
          // and hide the ones not containing the input while showing the ones that do
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

  </script> 

（函数（$）{
//不区分大小写的contains（）的自定义css表达式
jQuery.expr['：'].Contains=函数（a，i，m）{
返回（a.textContent | | a.innerText | |“”）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
函数listFilter（header，list）{//header是任意元素，list是无序列表
//创建筛选表单并将其添加到标题中
var form=$（“”）.attr（{“类”：“过滤性能”，“操作”：“#”}），
输入=$（“”）.attr（{“类”：“过滤器输入”，“类型”：“文本”}）；
$（表单）.append（输入）.appendTo（标题）；
$（输入）
.改变（功能）{
var filter=$（this.val（）；
如果（过滤器）{
//这将查找包含输入的列表中的所有链接，
//并隐藏不包含输入的内容，同时显示包含输入的内容
$（列表）.find（“a:not（：Contains（“+filter+”）））.parent（）.slideUp（）；
$（列表）.find（“a:包含（“+filter+”））.parent（）.slideDown（）；
}否则{
$（list.find（“li”）.slideDown（）；
}
返回false；
})
.keyup（函数（）{
//在每个字母后触发上述更改事件
$（this.change（）；
});
}
//昂多姆雷迪
$（函数（）{
listFilter（$（“#标题”）、$（“#列表”）；
});
}（jQuery））；

现在，这段代码可以在正常的无序列表上工作，但是当列表由JavaScript呈现时，它就不工作了。我有一种预感，它与innerHTML方法有关。此外，我还尝试将JQuery过滤器代码放在标记内，也放在标记前。两者似乎都不起作用

如果有人知道如何解决这个问题，请帮助我。另外，是否有更好的方式显示用户可以从中选择的好友列表？

问题在于：

$(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
$(list).find("a:Contains(" + filter + ")").parent().slideDown();

因为您正在渲染此：

divInfo.innerHTML += '<li>'+friends[i].name +'</li>';

---

您还可以通过只运行一次

Contains（）

代码来加快整个部分的速度，并对长列表做出重大约定，如下所示：

$(list).find("li:not(:Contains(" + filter + "))").slideUp();
$(list).find("li:Contains(" + filter + ")").slideDown();

$(input).bind("change keyup", function () {
   var filter = $(this).val();
   if(filter) {
     var matches = $(list).find("li:Contains(" + filter + ")").slideDown();
     $(list).find("li").not(matches).slideUp();
   } else {
     $(list).find("li").slideDown();
   }
});

function getFriends(){
  var theword = '/me/friends';
  FB.api(theword, function(response) {
    var divInfo = $("#divInfo"), friends = response.data;
    divInfo.append('<h1 id="header">Friends/h1>');
    var list = $('<ul id="list" />');
    for (var i = 0; i < friends.length; i++) {
      $('<li />', { text: friends[i].name }).appendTo(list);
    }
    divInfo.append(list);   
 });
} 

---

要解决这些潜在的（可能是真正的）innerHTML问题，请使用DOM构建您的结构，如下所示：

$(list).find("li:not(:Contains(" + filter + "))").slideUp();
$(list).find("li:Contains(" + filter + ")").slideDown();

$(input).bind("change keyup", function () {
   var filter = $(this).val();
   if(filter) {
     var matches = $(list).find("li:Contains(" + filter + ")").slideDown();
     $(list).find("li").not(matches).slideUp();
   } else {
     $(list).find("li").slideDown();
   }
});

function getFriends(){
  var theword = '/me/friends';
  FB.api(theword, function(response) {
    var divInfo = $("#divInfo"), friends = response.data;
    divInfo.append('<h1 id="header">Friends/h1>');
    var list = $('<ul id="list" />');
    for (var i = 0; i < friends.length; i++) {
      $('<li />', { text: friends[i].name }).appendTo(list);
    }
    divInfo.append(list);   
 });
} 

函数getFriends（）{ var theword='/me/friends'； api（单词、函数（响应）{ var divInfo=$（“#divInfo”），friends=response.data； divInfo.append（'Friends/h1>'）； var list=$（'ul id=“list”/>）； for（var i=0；i'，{text:friends[i].name}）.appendTo（list）； } 附加（列表）； }); } 通过这种方式，您可以一次构建所有内容，

是一个文档片段，然后是一个插入……出于两个原因，这对性能也有好处。1） 您当前正在使用

.innerHTML

调用添加无效的HTML…任何时候都不应该有未关闭的元素，2）在更快的文档片段创建之后，您正在执行2个DOM操作（1个用于标题，1个用于列表），而不是重复

。innerHTML

更改