asp.netjquery-uiautocompletetypeahead.jsbloodhound

aria-autocomplete / typeahead not auto selecting


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>';
                }
            }
        })

.


Solution

  • 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