Search in your fiddles

by Laurens Maneschijn

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- https://jsfiddle.net/ElMoonLite/e9um30x7/ -->

<h1>
	Search for your fiddles:
</h1>

<form>
	<label>
		<small>jsfiddle username:</small><br>
		<input type="text" id="jsfiddle_username" value="ElMoonLite" >
	</label>
	<label>
		<small>Search in title or description:</small><br>
		<input type="text" id="query" >
	</label>
	<button type="submit" id="search">Search</button>
	<span id="loader" class="hidden">&#8987; loading...</span>
</form>

<div>
	<a id="publicfiddleslink" target="_blank" href="#"></a>
	<table id="results_table" class="hidden" border="1">
		<thead>
			<tr>
				<th>#</th>
				<th>version</th>
				<th>latest</th>
				<th>created</th>
				<th>framework</th>
				<th>title</th>
				<th>description</th>
			</tr>
		</thead>
		<tbody id="results_tbody"></tbody>
	</table>

	<div id="results"></div>
	<div id="errorMessage"></div>
</div>

<div style="float:right;">
	idea source:<br>
	<a target="_blank" href="https://stackoverflow.com/questions/30484025/how-can-i-search-for-a-specific-fiddle-in-my-jsfiddle">stackoverflow</a><br>
	<a target="_blank" href="http://jsfiddle.net/panzerkunst/77fgau53/">forked from here</a><br>
</div>

CSS

h1, h2, h3, h4, h5, h6 {
	margin: 0 0;
	font-size: 100%;
}

form {
	display: inline-block;
	background: #ddd;
	border: 1px solid #000;
	padding: 5px;
}
label {
	display: inline-block;
}

.hidden {
    display: none;
}

table#results_table {
	border-collapse: collapse;
	width: 100%;
}
table#results_table tr td {
	max-width: 50%;
}
table#results_table tr:hover td {
	background: rgba(0, 0, 255, 0.1);
}

JavaScript

var $;
(function(){
	// https://code.jquery.com is not reachable so all jquery is failing.
	// For now as (hopefully) temp workaround, using other cdn:
	//
	// Put this in html tab: [script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"][/script]
	// (when putting [/script] here with proper tag characters everything breaks so pasted with square brackets)
	//
	// The while loop is evil, but this makes code halt before code below until we have $ available.
	// After 3 sec or n loops break out so we do not get stuck in an infinite loop.
	//
	var fallback = false, n=0;
	setTimeout(function(){fallback = true;}, 3000);
	while(!window.$) {
		n++;
		if(fallback || n > 10000){break;}
	}
	$ = window.$;
})();


var searchFiddles = {
	getUsername: function() {
		return $("#jsfiddle_username").val() || '';
	},
	getQuery: function() {
		return $("#query").val() || '';
	},
	setError: function(html) {
		$('#errorMessage').html(html);
	},
	setLoading: function(is_loading) {
		$("#loader").toggleClass('hidden', !is_loading);
		$('form, form input').attr('disabled', !!is_loading);
		$('#results_table').css('opacity', is_loading ? '0.5' : '');
		$('#query').focus();
	},
	updatePublicFiddlesLink: function() {
		var username = this.getUsername();
		$('#publicfiddleslink').attr('href', 'https://jsfiddle.net/user/' + username + '/').text(username + ' public fiddles');
	},
    launchSearch: function() {
		this.updatePublicFiddlesLink();
		this.setLoading(true);
		this.setError('');

		// TODO fetch multiple pages if we get 100 results
		$.ajax({
			url: "https://jsfiddle.net/api/user/" + this.getUsername() + "/demo/list.json",
			data: {
				limit: 100
//				limit: 100, // default: 10, max appears to be 100
//				start: 10, // 2nd page would be 100
//				// default is sort:'date' order:'desc'. quirk: it seems if you only supply sort:'date' the default for order falls back to order:'asc'. odd.
//				sort: 'date', // 'date', 'alphabetical', 'framwork'. default:...