태그 클라우드 필터

나는 여러 개의 span을 포함하는 div가 있고 각 span에는 하나의 href가 포함되어 있습니다.태그 클라우드 필터

기본적으로 태그 클라우드입니다. KeyUp 이벤트에서 태그 클라우드를 필터링하는 텍스트 상자를 갖고 싶습니다.

어떤 아이디어입니까 아니면 가능합니까?

업데이트 된 질문 : 검색을 다시 시작하려면 목록을 다시 설정하는 가장 좋은 방법은 무엇입니까? 당신이 원하는 무엇을 기본적으로

2010-05-05 Rod

, 이것은 아마에 개선 및 경량화 할 수있는이

$('#myTextbox').keyup(function() { 
    $('#divCloud > span').not('span:contains(' + $(this).val() + ')').hide(); 
});

출처

2010-05-05 14:04:40

1. '$ (this) .val()'을'this.value'로 변경하십시오. –

@David Murdoch : 모든 브라우저가 동일한 방식으로 작동하는 경우에만 안전하게 수행 할 수 있습니다 (모든 주요 브라우저는 부수적이며 그 방식으로 유지되지 않을 수도 있음). jquery를 통한 라우트는 브라우저 간 호환성을 보장합니다. 이는 실제로 자바 스크립트 프레임 워크를 사용할 때 가장 큰 이점입니다. –

음, 뭐라구? ''에있는'this.value'는 항상 입력의'value' 속성/속성이나 빈 문자열 ('''')을 반환합니다. –

같은 것입니다하지만이 이상하여 입력을 오토넷하여 여러 태그를 숨길 수있는 기능을 제공합니다 쉼표. 예를 들어 entering this, that, something을 입력하면 각 범위가 숨겨집니다.

데모 HTML :

<div id="tag_cloud"> 
    <span>this</span> 
    <span>that</span> 
    <span>another</span> 
    <span>something</span> 
    <span>random</span> 
</div> 

<input type="text" id="filter" />

데모 jQuery를 :

function oc(a){ 
    var o = {}; 
    for(var i=0;i<a.length;i++){ 
     o[a[i]]=''; 
    } 

    return o; 
} 

$(function(){ 
    $('#filter').keyup(function(){ 
     var a = this.value.replace(/ /g,'').split(','); 

     $('#tag_cloud span').each(function(){ 
      if($(this).text() in oc(a)){ 
       $(this).hide(); 
      } 
      else { 
       $(this).show(); 
      } 
     }) 
    }) 
})

출처

2010-05-05 14:37:02 Sam

태그 클라우드 필터

답변

관련 문제