javascript - 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.

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:

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

2. 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);
   

3. The Select box

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

Answer 1

尽管您可以轻松地在荧光笔功能中添加复选框..

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

问题是；

• 点击其中一个搜索结果后，typehead.js 会自动关闭其结果。您需要先覆盖它。
• 然后，您还需要将所选值列出到文本字段中。

如果您查看 typehead.js github 问题页面，问题 #254 提到他们没有计划支持多选，至少目前是这样。

现在我可能会因此而被否决，但如果我是你，我也会考虑其他选择。

• https://github.com/isteven/angular-multi-select：纯AngularJS，能够休息选择。
• http://ivaynberg.github.io/select2/：丰富的配置选项
• 或旧的可靠“选择”库（我不能发布更多链接）

希望能帮助到你。干杯。