bootstrap-multiselect dropdown - set focus on search and implement typeahead feature

Question

I hope there's a solution for this problem as I feel it will make my interface more user friendly. After reading the bootstrap-multiselect documentation, I couldn't find a way to know how to implement focus on the searchbox when you click on the dropdown and also I would like to add type ahead features.

I know there's a method called enablefiltering that adds the searchbox to the dropdown but not sure how to add focus to that.

the directive looks like this:(note this is just a part of the directive that I believe to be the section where the ngfocus should be applied but I might be wrong)

return {
        scope: {
            callback: "&",
            ngModel: "="
        },
        link: function (scope, element, attrs) {

            element.multiselect({
                maxHeight: attrs.maxHeight ? attrs.maxHeight : 300,
                includeSelectAllOption: attrs.includeSelectAllOption === undefined || attrs.includeSelectAllOption === null ? true : attrs.includeSelectAllOption === 'true',
                selectedClass: 'active',
                enableFiltering: true,
                enableCaseInsensitiveFiltering: true,
                nonSelectedText: attrs.nonSelectedText ? attrs.nonSelectedText : 'All',
                numberDisplayed: attrs.numberDisplayed ? attrs.numberDisplayed : 2,
                buttonContainer: attrs.buttonClass ? '<div class="btn-block">' : '<div class="btn-group">',
                buttonClass: attrs.buttonClass ? attrs.buttonClass : 'btn btn-default btn-xs',
                buttonWidth: '100%',
                onChange: function(element, checked) {
                    scope.callback();
                }
            });

Anyway to add these features?

Thank you

Answer 1

Is this question directed towards this plugin?

bootstrap-multiselect

If so, I am using the same plugin and I also wanted immediate focus within the "filter" input when the drop down is shown. In order to solve this issue I used the onDropdownShown event to put immediate focus within the filter area. My code now looks like this and it works perfectly. You click the dropdown and can immediately start typing and filter.

$('#other-major').multiselect({
   maxHeight: 200,
   numberDisplayed: 20,
   onDropdownShown: function(even) {
      this.$filter.find('.multiselect-search').focus();
    },
enableCaseInsensitiveFiltering: true });