Filtering the list of friends extracted by the Facebook api chart (more from a JavaScript / JQuery question than a Facebook API question)

Question

Hello JavaScript and Jquery gurus, I get and then show a list of facebook user's friends list using the following code:

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

Now, on my built-in Facebook website, I ended up wanting my users to pick their friends and send them gifts / facebook -punch them..or whatever. So I am trying to implement a simple jquery filter using this piece of code that manipulates the 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> 

, JavaScript, . , - innerHTML. , JQuery , . , .

- , , , . , , ?

Answer 1

:

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

:

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

, <li>, , , :

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

---

, Contains() , , :

$(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();
   }
});

---

(, ) innerHTML, DOM, :

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

, , <ul> , .... . 1) HTML .innerHTML... 2) 2 DOM (1 , 1 ) , .innerHTML.