CODEWITHSUNDEEP
angularjstwitter-bootstrapbootstrap-multiselect
cpu2007
cpu2007

Reputation: 965

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

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

Upvotes: 2

Views: 3393

Answers (1)

theDoke
theDoke

Reputation: 565

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

Upvotes: 4

Related Questions