title: Filtering the list of friends extracted by Facebook graph api ( more of a JavaScript/Jquery question than Facebook API question)
body: <p>Hello there JavaScript and Jquery gurus, I am getting and then displaying list of a facebook user's friend list by  using the following code: </p>
  
  <pre><code>  &lt;script&gt;
  function getFriends(){
  var theword = '/me/friends';
  FB.api(theword, function(response) {
    var divInfo = document.getElementById("divInfo");
    var friends = response.data;
    divInfo.innerHTML += '&lt;h1 id="header"&gt;Friends/h1&gt;&lt;ul id="list"&gt;';
    for (var i = 0; i &lt; friends.length; i++) {
      divInfo.innerHTML += '&lt;li&gt;'+friends[i].name +'&lt;/li&gt;';
     }  
    divInfo.innerHTML += '&lt;/ul&gt;&lt;/div&gt;';  
   });
  } 
  
  &lt;/script&gt;
  
  &lt;a href="#" onclick="getFriends(); return false;"&gt;graph friends&lt;/a&gt; 
  &lt;div id = divInfo&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now, in my Facebook integrated website, I would eventually like my users to choose their friends and send them gifts/facebook-punch them..or whatever. Therefore, I am trying to implement a simple <a href="http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/" rel="nofollow">Jquery filter</a> using this piece of code that manipulates with the DOM</p>
  
  <pre><code>     &lt;script&gt; 
  
  (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())&gt;=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 = $("&lt;form&gt;").attr({"class":"filterform","action":"#"}),
          input = $("&lt;input&gt;").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));
  
    &lt;/script&gt; 
  </code></pre>
  
  <p>Now, This piece of code works on normal unordered list, but when the list is rendered by JavaScript, it does not. I have a hunch that it has to do something with the innerHTML method. Also, I have tried putting the JQuery filter code within  and also right before  tag. Neither seemed to work. </p>
  
  <p>If anyone knows how to resolve this issue, please help me out. Also, is there a better way to display the friends list from which users can choose from?</p>