Allowing javascript access to form fields would be incredibly useful. For example:
We have a WHD instance, and our tickets often have a "Project" field. This value of this field may be of statistical and accounting interest, and should be restricted to valid values. Unlike a small drop-down list, the list of valid values grows over time as new Projects are added to our custom database.
A typeahead/autocomplete field with a customer-provided data source would make an excellent UI. WHD would need only provide:
- A way to inject javascript libraries, like jQuery, Typeahead.js, Handlebars...
- A way to reference fields using jQuery-like selectors.
- A way to inject custom javascript.
The net result would be a page with these additional items added (for example):
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/handlebarsjs/4.0.5/handlebars.min.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
...
var bloodhound = new Bloodhound({
limit:100,
datumTokenizer: function(datum) { return datum; },
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/ws/projects?filter=%QUERY',
wildcard: '%QUERY',
'ajax': {
beforeSend: function() {
$('.spinner').removeClass('hidden');
},
complete: function() {
$('.spinner').addClass('hidden');
}
}
}
});
bloodhound.initialize();
$('#project').typeahead({
hint:true,
highlight:true
},
{
name: 'project-search',
displayKey: 'code',
source: bloodhound.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'Cannot find any projects with that name.',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<div>{{name}} [{{code}}]</div>')
}
});
})
...
</script>
