<div class="spacer spacer--10"></div>
<div class="search-results">
<div class="search-results__inner">
<div class="search-box">
<div class="search-box__inner">
<form class="search-box__form" method="" action="">
<div class="search-box__field">
<div class="search-field">
<div class="search-field__input">
<div class="parent-class input-field is-required">
<div class="input-field__inner">
<input type="text" name="q" id="" value="" class="search-field__input" required>
<span class="input-field__placeholder">Search..</span>
</div>
<div class="input-field__error">
<p>This field is not filled in correctly or cannot be empty.</p>
</div>
</div>
</div>
<div class="search-field__submit">
<div class="action action--normal action--on-light action--icon">
<span class="action__icon">
<svg class="icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 57">
<path fill="currentColor" d="M60 54.93 39.86 34.91a21.74 21.74 0 0 0 4.28-12.97C44.14 9.84 34.24 0 22.07 0S0 9.84 0 21.94s9.9 21.94 22.07 21.94c6.23 0 11.87-2.59 15.88-6.73L57.92 57 60 54.93ZM22.07 40.95c-10.55 0-19.13-8.53-19.13-19.02S11.52 2.92 22.07 2.92 41.2 11.45 41.2 21.94s-8.58 19.02-19.13 19.02Z" />
</svg>
</span>
<span class="action__bg"></span>
</div>
</div>
</div>
</div>
<div class="search-box__filter">
<div class="search-filter">
<div class="select-checkboxes">
<div class="select-checkboxes__inner">
<label class="select-checkboxes__label">Filter by</label>
<span class="select-checkboxes__value"></span>
<span class="select-checkboxes__trigger">
<span class="select-checkboxes__symbol"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</span>
</div>
<div class="select-checkboxes__content">
<div class="select-checkboxes__options">
<ul class="select-checkboxes__items">
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 1">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 2">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 3">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 4" checked>
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 5" checked>
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 6">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 7">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
</ul>
<div class="select-checkboxes__actions">
<div class="actions actions--end">
<div class="actions__item">
<a href="#" target="_blank" class="select-checkboxes__action action action--normal action--on-light">
<span class="action__label">Apply filters</span>
<span class="action__bg"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="search-results__info">
<div class="search-info">
<div class="search-info__item">
<span class="search-info__amount">
<strong>55 results</strong> found
</span>
</div>
<div class="search-info__item">
<div class="search-info__per-page">
<div class="search-info__label">
Results per page
</div>
<div class="search-info__select">
<div class="select select--small">
<select name="" class="select__input">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
<div class="select__trigger">
<span class="select__symbol">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-results__list">
<div class="search-results__item">
<a href="https://pioneerdj.com/en-us/product/accessories/djc-1x-bag/bag/" class="snippet-b">
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-1x-bag/djc-1x_ddj-1000.png?h=250&amp;w=400&amp;hash=B5D5C735E00683D29F73DDE87CA69D3E" class="lazyload" alt="Product shot">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Product</span>
<h2 class="snippet-b__heading heading heading--6">DJC-1X BAG - DJ controller bag for the DDJ-1000, DDJ-1000SRT, DDJ-SX, DDJ-SX2, DDJ-SX3 and DDJ-RX</h2>
<div class="snippet-b__description">This DJ controller bag is the perfect size for the DDJ-1000, DDJ-1000SRT, DDJ-SX, DDJ-SX2, DDJ-SX3, DDJ-RX. The bag's protective egg-foam and fleeced lining prevent damage from vibrations and shocks.</div>
</div>
</div>
</a>
</div>
<div class="search-results__item">
<a href="https://www.pioneerdj.com/en/product/accessories/archive/djc-wecai/cable/" class="snippet-b is-archived">
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/accessories/djc-wecai/djc-wecai-main.png?h=250&w=400&hash=0661BE7BD5A36D91CEA98BEE84F78410" class="lazyload" alt="Product shot">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Product</span>
<h2 class="snippet-b__heading heading heading--6">DJC-WeCAi - iPad cable for the DDJ-WeGO and DDJ-ERGO</h2>
<div class="snippet-b__description">Use the WeCAi cable to connect a DDJ-WeGO or DDJ-ERGO to your iTunes library on a mobile device running Algorridim's djay 2 app. Or get to grips with video mixing using Algorridim's vjay app. USB power supply The WeCAi includes a USB connection for...</div>
</div>
</div>
</a>
</div>
<div class="search-results__item">
<a href="https://www.pioneerdj.com/en/support/software/ddj-rzx/" class="snippet-b">
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="/graphics/news_icon.png" class="lazyload" alt="Download icon">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Download</span>
<h2 class="snippet-b__heading heading heading--6">DDJ-RZX firmware Windows 1.10</h2>
<div class="snippet-b__description">This firmware is a system software program for your DJ CONTROLLER. Please update the firmware to the latest version to enhance the product's performance. Please read Firmware Update Guide to check the firmware version of your DJ CONTROLLER and how to...</div>
</div>
</div>
</a>
</div>
<div class="search-results__item">
<a href="#" class="snippet-b is-video video-player__trigger">
<span class="video-ID">MxRKpTI5dqo</span>
<div class="snippet-b__inner">
<div class="snippet-b__aside">
<div class="snippet-b__visual">
<picture class="visual">
<img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/player/cdj-3000/cdj-3000-video-prev.jpg?mh=100&c=1&ch=100&cw=100&hash=F8C20390BEDB92852F19AD3FA50AAE87" class="lazyload" alt="Video image">
</picture>
</div>
</div>
<div class="snippet-b__content">
<span class="snippet-b__label">Video</span>
<h2 class="snippet-b__heading heading heading--6">CDJ-3000 Introduction video</h2>
<div class="snippet-b__description"></div>
</div>
</div>
</a>
</div>
</div>
<div class="search-results__paging">
<div class="paging">
<div class="paging__header">
<span class="paging__label">Results page</span>
</div>
<div class="paging__list">
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=1" class="paging__dir paging__dir--left">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=1" class="paging__link">1</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=2" class="paging__link">2</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=3" class="paging__link is-active">3</a>
</div>
<div class="paging__item">
<span class="paging__link">…</span>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=5" class="paging__link">19</a>
</div>
<div class="paging__item">
<a href="/en/search-results/?q=ddj-&page=2" class="paging__dir paging__dir--right is-active">
<svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<footer class="search-results__footer">
<p>Didn’t find what you’re looking for? Maybe use fewer words or a more general search term.<br>If you still have no luck you can contact our <a href="/en/support/contact">customer service</a>.</p>
</footer>
</div>
</div>
<div class="spacer spacer--17"></div>
<!--
HTML response from test page @ https://test1.pioneerdj.com/en/support/software/
Styling fixed in reskin-theme-2022 and in /05_buckets/search-results-reskin/
<ul
class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"
id="ui-id-1"
tabindex="0"
style="
z-index: 2;
/* display: none; */
top: 365px;
left: 273px;
width: 274px;
">
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-48" tabindex="-1">
CDJ-900<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-49" tabindex="-1">
CDJ-TOUR1<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-50" tabindex="-1">
CDJ-2000NXS<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-51" tabindex="-1">
CDJ-2000<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-52" tabindex="-1">
CDJ-2000NXS2-W<br>white
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-53" tabindex="-1">
CDJ-850-MP-K<br>Black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-54" tabindex="-1">
CDJ-850-MP-W<br>white
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-55" tabindex="-1">
CDJ-350-W<br>white
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-56" tabindex="-1">
CDJ-350-S<br>silver
</a>
</li>
</ul>
-->
<div class="spacer spacer--10"></div>
{{render '@search-results' searchresults merge=true}}
<div class="spacer spacer--17"></div>
<!--
HTML response from test page @ https://test1.pioneerdj.com/en/support/software/
Styling fixed in reskin-theme-2022 and in /05_buckets/search-results-reskin/
<ul
class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"
id="ui-id-1"
tabindex="0"
style="
z-index: 2;
/* display: none; */
top: 365px;
left: 273px;
width: 274px;
">
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-48" tabindex="-1">
CDJ-900<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-49" tabindex="-1">
CDJ-TOUR1<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-50" tabindex="-1">
CDJ-2000NXS<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-51" tabindex="-1">
CDJ-2000<br>black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-52" tabindex="-1">
CDJ-2000NXS2-W<br>white
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-53" tabindex="-1">
CDJ-850-MP-K<br>Black
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-54" tabindex="-1">
CDJ-850-MP-W<br>white
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-55" tabindex="-1">
CDJ-350-W<br>white
</a>
</li>
<li class="ui-menu-item" role="presentation">
<a class="result ui-corner-all" id="ui-id-56" tabindex="-1">
CDJ-350-S<br>silver
</a>
</li>
</ul>
-->
searchresults:
searchbox:
searchfilter: true
// LEGACY SCRIPT
(function(w, $) {
$(document).ready(function () {
$("button").click(function (e) {
AppendSearchQuery(e);
});
var url = new URL(window.location.href);
var i = url.searchParams.get('i');
var f = url.searchParams.get('f');
if (i != null && i!="") {
$("#pageitemcount").val(i);
}
if (f != null && f != "") {
var usercheckedvalue = f.split(",");
if (usercheckedvalue != null && usercheckedvalue != undefined && usercheckedvalue.length > 0) {
for (i = 0; i <= usercheckedvalue.length; i++) {
$(".search-filter__options--desktop input[value='" + usercheckedvalue[i] + "']").prop('checked', true);
}
}
}
$("input").on('keyup', function (event) {
if (event.key === "Enter") {
AppendSearchQuery(event);
}
});
function AppendSearchQuery(e) {
e.preventDefault();
var filters_array = [];
$.each($("input[name='f']:checked"), function () {
filters_array.push($(this).val());
});
var filters = filters_array.join(',');
var url = new URL(window.location.href);
var params = new URLSearchParams(window.location.search);
params.delete('f');
params.delete('i');
//var page = params.get("page");
//if(page!=undefined && page!=null && page!="")
params.delete('page');
params.delete('q');
var searchterm = $('.search-box__field input[name=q]').val();
if (searchterm != undefined && searchterm != null && searchterm != "") {
params.append('q', searchterm);
}
var resultsperpage = $("#pageitemcount").val();
if (resultsperpage != undefined && resultsperpage != null && resultsperpage != "") {
params.append('i', resultsperpage);
}
if (filters != undefined && filters != null && filters != "") {
params.append('f', filters);
}
url.search = params;
window.location.href = url;
}
});//end of document ready
}(window, window.jQuery));
No notes defined.