Фильтрация списка друзей, извлеченных графиком Facebook api (больше из вопроса JavaScript/JQuery, чем вопрос API Facebook)

Question

Здравствуйте, JavaScript и Jquery gurus, я получаю и затем показываю список друзей пользователя в 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> 

Сейчас, на мой Facebook интегрированный веб-сайт, я бы в конечном итоге, как мои пользователи выбирать своих друзей и отправлять им подарки/facebook-перфоратор them..or что угодно. Поэтому я пытаюсь реализовать простой Jquery filter используя этот кусок кода, который манипулирует с 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>, затем одну вставку ... .t его также лучше для выполнения по двум причинам. 1) Вы в настоящее время добавляете недействительный HTML-код с вызовами .innerHTML ... у вас никогда не должно быть незакрытого элемента в любой момент и 2) вы выполняете 2 манипуляции с DOM (1 для заголовка, 1 для списка) после более быстрое создание фрагмента документа, а не повторение .innerHTML изменений.