Chrome에서 jQuery로 1500+ 항목을 실시간 필터링하기 위해 해결

수많은 노드가 숨겨져 Chrome이 멈추는 Chrome/Webkit 71305 버그에 물 렸습니다. Safari에서도 발생합니다. 마크 업의Chrome에서 jQuery로 1500+ 항목을 실시간 필터링하기 위해 해결

jQuery.expr[':'].Contains = function(a, i, m) { 
    return $.trim((a.textContent || a.innerText || "")).toUpperCase().indexOf(m[3].toUpperCase()) == 0; 
}; 

var input = $('input'); 
var container = $('ul'); 

input.keyup(function(e) { 
    var filter = $.trim(input.val()); 

    if (filter.length > 0) { 
     // Show matches. 
     container.find("li:Contains(" + filter + ")").css("display", "block"); 
     container.find("li:not(:Contains(" + filter + "))").css("display", "none"); 
    } 
    else { 
     container.find('li').css("display", "block"); 
    } 
});

발췌문 :

<input type="text" /> 
<ul> 
    <li> 
     <div> 
      <span title="93252"><label><input type="checkbox">3G</label></span> 
     </div> 
    </li> 
</ul>

자바 스크립트가 실행하는 데 걸리는 시간

나는 다음과 드롭 다운 메뉴에있을 것입니다 목록 항목을 필터링하고 무시할 만하다. input의 텍스트가 삭제 된 후 Chrome에서 요소를 다시 그려야하는 경우입니다. FF6/IE7-9에서는 발생하지 않습니다. http://jsfiddle.net/uUk7S/17/show/

내가 숨어 크롬이 중단 될 수 없습니다 요소를 보여주는 것이 아니라 취할 수있는 다른 방법이 있나요 :

나는이 문제를 설명하기 위해 JSFiddle을했다? ul을 복제하고 복제본을 처리하고 DOM에서 ul을 복제본으로 완전히 바꿔 보았습니다.하지만 IE에서이 방법이 훨씬 더 느려지 길 바래요.

출처

2011-08-30 Soliah

'span'요소의 닫는 괄호가 없습니다. 그게 원인 일 수 있니? –

@William, Vim에서 마크 업을 정리할 때 실수 한 것입니다. 나는 바이올린을 해결할 것이지만 문제는 여전히 지속될 것입니다. (특히 다른 브라우저에서 잘 작동하기 때문에). – Soliah

요소를 숨기려면 다른 CSS 가능성이 있습니까?

visibility 스위치와 같은 CSS 소품을 사용하고 있습니까? height:auto과 height:0;overflow-y:hidden; 사이에서 전환 하시겠습니까?

작은 예제 here을 만들었습니다. 표시하려면 .css({"visibility":"visible","height":"auto"});을 사용하고 표시하려면 ({"visibility":"hidden","height":"0"})을 사용하고 있습니다. 그리고 크롬에서 몇 가지 테스트에서 잘 작동하는 것 같습니다.

편집 :here, 당신은 단지 .css("visibility","visible"); 및 .css("visibility","hidden");를 사용해야 더 나은. li[style~="hidden;"]{height:0;}을 사용하면 높이 수정이 수행됩니다.

출처

2011-08-30 06:48:42

신장의 변화는 제가 게시 하려던 접근입니다. 나를 위해 잘 일했다. –

잘 작동합니다! 필터링 된 요소에'패딩 (padding) '이 추가 된 경우 스타일에서'0 '으로 설정해야합니다. – Soliah

-1

사실, 당신은 <li> 요소에 빈 값을 넣을 수 있습니다. 사실 그게 내가 고칠 수 있었던 것뿐입니다. 그리고 다시 가치를 필요로 할 때 다시 돌려 놓으십시오. 또는 <li>을 삭제할 수 있습니다. 하지만 AJAX를 사용하는 것이 더 좋습니다.

출처

2011-08-30 06:48:04

Chrome에서 jQuery로 1500+ 항목을 실시간 필터링하기 위해 해결

답변

관련 문제