AngularJS : Bootstrap typeahead with multiselect

Question

I am using bootstrap multiselect in my angular application. (Bootstrap 2.3)

http://davidstutz.github.io/bootstrap-multiselect/index-2-3.html#examples

I want to convert the same thing in to bootstrap typeahead but still the user can multiselect values in search results.

enter image description here

I am using the highlighter function of bootstrap typeahed to add check-boxes to results. I am referring to the this plnkr http://plnkr.co/edit/szO2An1oslDyGftnshyR?p=preview but I am still unable to make my code work.

Old Code for multiselect:

to check last selected values

$scope.selectOptions = function () {
var index = fetching the index of checked values;
var selectedAttrFound = index>-1;
if (selectedAttrFound == true) {
angular.element("#attr-value-selector")
.multiselect('select', $scope.filterAttributes[index].attributeValues);
}
};

to populate the multiselect

$scope.attrValuesWidget = angular.element("#attr-value-selector")
.multiselect({
 numberDisplayed: 2,
 enableFiltering: true,
 maxHeight: "300",
 onChange: function (element, checked) {
 $scope.attributeActionValue = {
 attribute: $scope.attributeSelected,
 value: element.val(),
 checked: checked
 };
 $scope.$apply();
 }
 })
 .multiselect('dataprovider', $scope.configAttributeValuesList);

The Select box

<select id='attr-value-selector' multiple='multiple' ></select>

user2298x3 · Accepted Answer · 2014-04-04 23:17:30Z

Although you can easily add checkboxes in your highlighter function..

highlighter: function( item ){
    var bond = bondObjs[ item ];              
    return '<div class="bond">'
            +'<input type="checkbox" class="mightBeRequiredToCollectTheSelectedResult">' 
            +'<img src="' + bond.photo + '" />'
            +'<br/><strong>' + bond.name + '</strong>'
            +'</div>';
}

The problems are;

typehead.js automatically closes its result after you click one of the search result. You need to override this first.
Then you also need to list the selected values into the textfield.

If you check typehead.js github issues page, issue #254 mentioned that they don't have plan to support multi select, at least for now.

Now I might get downvoted for this, but If I were you I'll consider other alternatives as well.

https://github.com/isteven/angular-multi-select: pure AngularJS, ability to rest selection.
http://ivaynberg.github.io/select2/: rich configuration options
Or the old reliable "chosen" library (I can't post more links)

Hope it helps. Cheers.

Collectives™ on Stack Overflow

AngularJS : Bootstrap typeahead with multiselect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related