<titledata-rh="true">Advanced filters | Shuffle.js</title><metadata-rh="true"name="viewport"content="width=device-width,initial-scale=1"><metadata-rh="true"name="twitter:card"content="summary_large_image"><metadata-rh="true"property="og:image"content="https://vestride.github.io/Shuffle/img/shuffle-open-graph.png"><metadata-rh="true"name="twitter:image"content="https://vestride.github.io/Shuffle/img/shuffle-open-graph.png"><metadata-rh="true"property="og:url"content="https://vestride.github.io/Shuffle/docs/advanced-filters"><metadata-rh="true"property="og:locale"content="en"><metadata-rh="true"name="docusaurus_locale"content="en"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docusaurus_version"content="current"><metadata-rh="true"name="docusaurus_tag"content="docs-default-current"><metadata-rh="true"name="docsearch:version"content="current"><metadata-rh="true"name="docsearch:docusaurus_tag"content="docs-default-current"><metadata-rh="true"property="og:title"content="Advanced filters | Shuffle.js"><metadata-rh="true"name="description"content="By passing a function to filter, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return true to keep the element or false to hide it."><metadata-rh="true"property="og:description"content="By passing a function to filter, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return true to keep the element or false to hide it."><linkdata-rh="true"rel="icon"href="/Shuffle/img/favicon.png"><linkdata-rh="true"rel="canonical"href="https://vestride.github.io/Shuffle/docs/advanced-filters"><linkdata-rh="true"rel="alternate"href="https://vestride.github.io/Shuffle/docs/advanced-filters"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://vestride.github.io/Shuffle/docs/advanced-filters"hreflang="x-default"><linkrel="preconnect"href="https://www.google-analytics.com">
<script>!function(){functiont(t){document.documentElement.setAttribute("data-theme",t)}vare=function(){try{returnnewURLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{returnlocalStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{constc=newURLSearchParams(window.location.search).entries();for(var[t,e]ofc)if(t.startsWith("docusaurus-data-")){vara=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><divid="__docusaurus"><divrole="region"aria-label="Skip to main content"><aclass="skipToContent_G6ar"href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><navaria-label="Main"class="navbar navbar--fixed-top"><divclass="navbar__inner"><divclass="navbar__items"><buttonaria-label="Toggle navigation bar"aria-expanded="false"class="navbar__toggle clean-btn"type="button"><svgwidth="30"height="30"viewBox="0 0 30 30"aria-hidden="true"><pathstroke="currentColor"stroke-linecap="round"stroke-miterlimit="10"stroke-width="2"d="M4 7h22M4 15h22M4 23h22"></path></svg></button><aclass="navbar__brand"href="/Shuffle/"><divclass="navbar__logo"><imgsrc="/Shuffle/img/favicon.svg"alt="Shuffle.js Logo"class="themedComponent_DHUr themedComponent--light_DIHH"height="24"width="24"><imgsrc="/Shuffle/img/favicon.svg"alt="Shuffle.js Logo"class="themedComponent_DHUr themedComponent--dark_Bv2M"height="24"width="24"></div><bclass="navbar__title text--truncate">Shuffle.js</b></a><aaria-current="page"class="navbar__item navbar__link navbar__link--active"href="/Shuffle/docs/install">Docs</a></div><divclass="navbar__items navbar__items--right"><ahref="https://www.buymeacoffee.com/glen.cheney"target="_blank"rel="noopener noreferrer"class="navbar__item navbar__link">Buy me a coffee<svgwidth="13.5"height="13.5"aria-hidden="true"viewBox="0 0 24 24"class="iconExternalLink_awgD"><pathfill="currentColor"d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><ahref="https://github.com/Vestride/Shuffle"target="_blank"rel="noopener noreferrer"class="navbar__item navbar__link">GitHub<svgwidth="13.5"height="13.5"aria-hidden="true"viewBox="0 0 24 24"class="iconExternalLink_awgD"><pathfill="currentColor"d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><divclass="toggle_OLSw colorModeToggle_Hg9V"><buttonclass="clean-btn toggleButton_wYmb toggleButtonDisabled_vaDU"type="button"disabled=""title="Switch between dark and light mode (currently light mode)"aria-label="Switch between dark and light mode (currently light mode)"aria-live="polite"><svgviewBox="0 0 24 24"width="24"height="24"class="lightToggleIcon_Sxwe"><pathfill="currentColor"d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svgviewBox="0 0 24 24"width="24"height="
<p>By passing a function to <code>filter</code>, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
<h2class="anchor anchorWithStickyNavbar_fF9Z"id="example">Example<ahref="#example"class="hash-link"aria-label="Direct link to Example"title="Direct link to Example"></a></h2>
<divclass="language-js codeBlockContainer_ZGJx theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_qZBB"><pretabindex="0"class="prism-code language-js codeBlock_TAPP thin-scrollbar"style="color:#393A34;background-color:#f6f8fa"><codeclass="codeBlockLines_AdAo"><spanclass="token-line"style="color:#393A34"><spanclass="token comment"style="color:#999988;font-style:italic">// Filters elements with a data-title attribute with less than 10 characters</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain">shuffleInstance</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token method function property-access"style="color:#d73a49">filter</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token parameter">element</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token plain"></span><spanclass="token arrow operator"style="color:#393A34">=></span><spanclass="token plain"> element</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token property-access">dataset</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token property-access">title</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token property-access">length</span><spanclass="token plain"></span><spanclass="token operator"style="color:#393A34"><</span><spanclass="token plain"></span><spanclass="token number"style="color:#36acaa">10</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><br></span></code></pre><divclass="buttonGroup_TNwR"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_MVhB"aria-hidden="true"><svgviewBox="0 0 24 24"class="copyButtonIcon_yxgH"><pathfill="currentColor"d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgviewBox="0 0 24 24"class="copyButtonSuccessIcon_QJLJ"><pathfill="currentColor"d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h2class="anchor anchorWithStickyNavbar_fF9Z"id="searching">Searching<ahref="#searching"class="hash-link"aria-label="Direct link to Searching"title="Direct link to Searching"></a></h2>
<divclass="language-js codeBlockContainer_ZGJx theme-code-block"style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><divclass="codeBlockContent_qZBB"><pretabindex="0"class="prism-code language-js codeBlock_TAPP thin-scrollbar"style="color:#393A34;background-color:#f6f8fa"><codeclass="codeBlockLines_AdAo"><spanclass="token-line"style="color:#393A34"><spanclass="token comment"style="color:#999988;font-style:italic">// Add an event listener for key presses.</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token dom variable"style="color:#36acaa">document</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token method function property-access"style="color:#d73a49">querySelector</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'.js-shuffle-search'</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token method function property-access"style="color:#d73a49">addEventListener</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token string"style="color:#e3116c">'keyup'</span><spanclass="token punctuation"style="color:#393A34">,</span><spanclass="token plain"> handleSearchKeyup</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token comment"style="color:#999988;font-style:italic">// Filter the shuffle instance by items with a title that matches the search input.</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">function</span><spanclass="token plain"></span><spanclass="token function"style="color:#d73a49">handleSearchKeyup</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token parameter">event</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token plain"></span><spanclass="token punctuation"style="color:#393A34">{</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"></span><spanclass="token keyword"style="color:#00009f">const</span><spanclass="token plain"> searchText </span><spanclass="token operator"style="color:#393A34">=</span><spanclass="token plain"> event</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token property-access">target</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token property-access">value</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token method function property-access"style="color:#d73a49">toLowerCase</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">)</span><spanclass="token punctuation"style="color:#393A34">;</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"style="display:inline-block"></span><br></span><spanclass="token-line"style="color:#393A34"><spanclass="token plain"> shuffleInstance</span><spanclass="token punctuation"style="color:#393A34">.</span><spanclass="token method function property-access"style="color:#d73a49">filter</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token punctuation"style="color:#393A34">(</span><spanclass="token parameter">element</span><spanclass="token parameter punctuation"style="color:#393A34">,</span><spanclass="
<p>In this example, when the user presses a key in the input, we call <code>filter</code> on shuffle with a callback function. Inside the callback function, we return whether the current shuffle item contains the search text.</p>