add typeahead support to the name field

using this bootstrap3 backport of the bold bootstrap2 typeahead
component because twitter typeahead.js is poop

resources/public/js/site.js

@@ -13,27 +13,76 @@ function isJsonResponse(xhr) {
 	return contentType.indexOf('application/json') !== -1;
 }
 
+function getValueOf(element) {
+	if (element.prop('tagName') === 'INPUT' && element.attr('type') === 'checkbox')
+		return element.is(':checked') ? element.val() : element.data('unchecked-value');
+	else
+		return element.val();
+}
+
+function getMethodParams(form) {
+	var params = {};
+	form.find('.form-control, input[type=checkbox]').filter('[data-fieldname]').each(function() {
+		var element = $(this);
+		var fieldName = element.data('fieldname');
+		var value = getValueOf(element);
+
+		if (value && value.length > 0)
+			params[fieldName] = value;
+	});
+	return params;
+}
+
+function getAdditionalUrl(form) {
+	var urlParts = [];
+	form.find('.form-control, input[type=checkbox]').filter('[data-uri-path-order]').each(function() {
+		var element = $(this);
+		var order = parseInt(element.data('uri-path-order'));
+		var value = getValueOf(element);
+
+		if (value && value.length > 0)
+			urlParts.push({order: order, value: value});
+	});
+
+	urlParts.sort(function(a, b) {
+		if (a.order < b.order)
+			return -1;
+		else if (a.order > b.order)
+			return 1;
+		else
+			return 0;
+	})
+
+	var urlPartStrings = [];
+	urlParts.forEach(function(value) {
+		urlPartStrings.push(value.value);
+	});
+
+	if (urlPartStrings.length > 0)
+		return '/' + urlPartStrings.join('/');
+	else
+		return '';
+}
+
 $(document).ready(function() {
+	$('input[data-typeahead-url]').each(function() {
+		var element = $(this);
+		var typeaheadUrl = element.data('typeahead-url');
+
+		element.typeahead({source: function(query, process) {
+			return $.get(typeaheadUrl, { q: query }, function (data) {
+				return process(data);
+			});
+		}});
+	});
+
 	$('form.api-form').submit(function(e) {
 		e.preventDefault();
 
 		var form = $(this);
 		var fieldset = form.find('fieldset');
-
-		var params = {};
-		form.find('.form-control, input[type=checkbox]').filter('[data-fieldname]').each(function() {
-			var element = $(this);
-			var fieldName = element.data('fieldname');
-
-			var value;
-			if (element.prop('tagName') === 'INPUT' && element.attr('type') === 'checkbox')
-				value = element.is(':checked') ? element.val() : element.data('unchecked-value');
-			else
-				value = element.val();
-
-			if (value && value.length > 0)
-				params[fieldName] = value;
-		});
+		var params = getMethodParams(form)
+		var additionalUrl = getAdditionalUrl(form);
 
 		var textOutputContainer = form.siblings('pre.textOutputContainer');
 		var htmlOutputContainer = form.siblings('div.htmlOutputContainer');
@@ -41,7 +90,7 @@ $(document).ready(function() {
 		var methodCallDisplay = form.siblings('div.methodCallDisplay');
 		var methodCallLink = methodCallDisplay.find('a.url');
 
-		var apiEndpoint = form.data('api-endpoint');
+		var apiEndpoint = form.data('api-endpoint') + additionalUrl;
 
 		textOutputContainer.text('');
 		htmlOutputContainer.html('');

resources/views/base.html

@@ -12,6 +12,7 @@
 
 	{{ javascript('/js/jquery.min.js') }}
 	{{ javascript('/js/bootstrap.min.js') }}
+	{{ javascript('/js/bootstrap3-typeahead.min.js') }}
 	{{ javascript('/js/site.js') }}
 
 	<script type="text/javascript">

resources/views/methods/art-by-name.html

@@ -0,0 +1,49 @@
+<form class="form-horizontal api-form" role="form" id="artByNameForm" data-api-endpoint="/art">
+	<fieldset>
+
+		<div class="form-group">
+			<label for="artByNameName" class="col-sm-2 control-label">Name</label>
+			<div class="col-sm-3">
+				<input type="text"
+				       class="form-control"
+				       id="artByNameName"
+				       placeholder="Enter name of art to get"
+				       data-provide="typeahead"
+				       data-uri-path-order="0"
+				       data-typeahead-url="{{ path('/api/art') }}" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label for="artByNameIndex" class="col-sm-2 control-label">Index</label>
+			<div class="col-sm-3">
+				<input type="text" class="form-control" id="artByNameIndex" placeholder="(Optional) index of the art" data-uri-path-order="1" />
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label for="artByNameFormat" class="col-sm-2 control-label">Format</label>
+
+			<div class="col-sm-3">
+				<select class="form-control" id="artByNameFormat" data-fieldname="format">
+					<option>html</option>
+					<option>text</option>
+				</select>
+			</div>
+		</div>
+
+		<div class="form-group">
+			<div class="col-sm-offset-2 col-sm-10">
+				<button type="submit" class="btn btn-primary">Find</button>
+			</div>
+		</div>
+
+	</fieldset>
+</form>
+
+<div class="methodCallDisplay well well-sm" style="display: none;">
+	<strong>API request:</strong> &nbsp; <a class="url text-muted"></a>
+</div>
+<pre class="textOutputContainer" style="display: none;"></pre>
+<div class="htmlOutputContainer" style="display: none;"></div>
+<div class="methodErrorContainer alert alert-danger" style="display: none;"></div>

resources/views/methods/art.html

@@ -1 +1 @@
-<p>TODO: content for "ASCII Art" section</p>
+<div>{% include "art-by-name.html" %}</div>