I have three fields Name, Dept. and Title where Name is a Searchable dropdown field. Dept. and Title are read only fields. I want to be able to clear the fields Dept. and Title when no results are returned for Name.
First I selected test,test from the dropdown list under Name. After I select it, then the Dept. and Title show up.
If I change the Name and get no result (None found), I want to clear Dept and Title fields. How can I do that?
Here is my code
<script>
var Speakers = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
remote: {
url: '/AJAX/searchspeakers?q=%QUERY&searchType=Speakers',
rateLimitWait: 250,
ajax: { cache: false }
}
});
Speakers.initialize();
var setupTypeAhead = function (target) {
$(target + '_Name').typeahead(null, {
name: 'Speakers',
display: 'Name',
source: Speakers.ttAdapter(),
minLength: 3,
highlight: true,
templates: {
empty: [
'<div class="empty-message">',
'None found...',
'</div>'
].join('n'),
suggestion: Handlebars.compile('<div><strong>{{Name}}</strong><br>{{Extra}}</div>')
}
}).on('typeahead:selected typeahead:autocompleted', function (obj, selected, name) {
$(target + '_Name').val(selected.Contact.Name);
$(target + '_Dept').val(selected.Contact.Dept);
$(target + '_Title').val(selected.Contact.Title);
}).off('blur', function () {
$this('close');
});
}
</script>