I have implemented aria-autocomplete and twitter/bloodhound typeahead.
Problem: It is partially working in the sense that it retrieves the value, but I want it to be automatically selected. When I type in a Member ID, I want it to automatically select the name in a div below, and in a hidden textbox (which is later checked if there is a value, before allowing user to go to next screen)
What I've tried: I have read the following:
https://msdn.microsoft.com/en-us/ie/hh968240(v=vs.94) https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
I then changed "aria-autocomplete": "list" to "both" as well as "inline" and neither had an affect.
I then changed my textbox from autocomplete off to autocomplete on with no effect:
I then read about typeahead, but I am not understanding why the autocompleted is not having an affect either. Here is the code for that:
.
displayKey: function (item) { return item.Subscriber_ID },
templates: {
//Template to show if there are no results
empty: function (context) {
// console.log(1) // put here your code when result not found
$(".tt-dataset").text('No Results Found');
},
suggestion: function (item) {
return '<div class=""> ' + item.First_Name + " " + item.Last_Name + '</div>';
}
}
})
.
I resolved this by adding some code to the suggestion function, to add a TextBox that the c# should look at , instead of having it look at it after the click:
$('#suggestionName').val(item.First_Name + " " + item.Last_Name); //used to check whether there is a value when hitting submit (hidden field)
$('#divDisplayMemberName').html(item.First_Name + " " + item.Last_Name); //displays it in a <p> tag underneath the TextBox
return '<div class=""> ' + item.First_Name + " " + item.Last_Name + '</div>'; //displays the actual suggestion