Question

我有bootstrap-select多模式和实时搜索。我需要添加一个行为，比如Stack Overflow Tags select：意思是如果你输入一个列表中不存在的关键字，就应该在你按下逗号后立即添加。有没有简单的方法呢？

<select id="@Html.IdForModel()" name="@Html.NameForModel()"
 class="selectpicker form-control" data-live-search="true" multiple></select>

为了完整性：我还在使用https://github.com/truckingsim/Ajax-Bootstrap-Select，但我怀疑这很重要。

Answer 1

好的，这似乎是一个非常复杂的问题需要解决。部分是因为我使用的是Ajax-Bootstrap-Select（认为这是微不足道的，但事实并非如此）。这段代码存在一些问题，比如垃圾邮件setTimeout - 我对大多数人都不在乎，但是这段代码应该让任何正在努力解决我所遇到的问题的人有所了解。

var keywordsSelectItemTemplate = $('#@Html.IdForModel()selectItemTemplate').html();
var keywordsSelectBox = $('#@Html.IdForModel()');
var keywordsSelectedElements = [];
// list of words that were persisted
var keywordsAddedElementsStable = [];
// Remembered list of words that are currently in the input box (currently entered)
var keywordsAddedElements = [];

// The search box input
var keywordsSearchBox = keywordsSelectBox.parent().find("div.bs-searchbox").find("input");
// Subscribe to all kind of keypress events to track changes
keywordsSearchBox.bind("propertychange change click keyup input paste",
       function(event) {
                            var value = keywordsSearchBox.val();

                            // Parse words by splitting input box value with ,
                            var keywords = value.split(",").map(function (str) {
                                return str.trim();
                            }).filter(function(str) {
                                return str != undefined && str.length > 0;
                            });

                            // Removing last word, because this is the word that is currently being typed
                            if (keywordsAddedElements.slice(-1).length > 0) {
                                keywordsAddedElements.splice(-1, 1);
                            }

                            // Remembering all words so Bootstrap-Select-Ajax could process them.
                            keywords.forEach(function(keyword) {
                                if ($.inArray(keyword, keywordsAddedElements) === -1) {
                                    keywordsAddedElements.push(keyword);
                                }
                            });

                            // Adding entered words as selected and refresh the selectbox. The timeout should be biger than the timeout defined
                            // in Bootstrap-Select-Ajax, so this refresh will happen after Bootstrap-Select-Ajax process the selected list
                            setTimeout(function() {
                                keywordsSelectBox.val(keywordsSelectBox.val().concat(keywords));
                                keywords.forEach(function(keyword) {
                                    keywordsSelectBox.find("[value=" + keyword + "]").attr('selected', '1');
                                });

                                keywordsSelectBox.selectpicker('refresh');
                                keywordsSelectBox.selectpicker('render');
                            }, 500);
                        });

                    // If we leave search box input - remember the entered items as persisted. 
                    // The user is no longer able to change them, unless by clicking in Bootstrap-Select (as any other items)
                    keywordsSearchBox.focusout(function() {
                        // Refreshing selected items of Bootstrap-Select-Ajax, ensuring that it thinks 
                        // these items were processed as any other.
                        var selectedItems = keywordsSelectBox.ajaxSelectPicker()
                            .data()
                            .AjaxBootstrapSelect.list.selected;
                        keywordsAddedElements.forEach(function(el) {
                            if (!selectedItems.some(function(element) { return element.value === el;})) {
                                selectedItems.push({
                                    "class": "",
                                    data: {
                                        content: el
                                    },
                                    preserved: true,
                                    selected: true,
                                    text: el,
                                    value: el
                                });
                            }
                        });

                        // Remember items as "persisted"
                        keywordsAddedElementsStable = keywordsAddedElementsStable.concat(keywordsAddedElements);
                        keywordsAddedElements = [];

然后在ajaxSelectPicker中preprocessData：

  // Adding both "persisted" and "temporary" items to the Bootstrap-Select-Ajax list.
   keywordsAddedElementsStable.concat(keywordsAddedElements).forEach(function(el) {
        result.push({
            value: el,
            text: el,
            data: {
                content: el
            }
        });

不使用Ajax-Bootstrap-Select，问题非常简单：查找搜索框：

var keywordsSearchBox = keywordsSelectBox.parent().find("div.bs-searchbox").find("input")

订阅更改：

keywordsSearchBox.bind("propertychange change click keyup input paste",
       function(event) { ...

并通过selectBox.selectpicker('val', searchBox.val().split(","));

添加元素

Bootstrap-select，SO标记字段等行为

1 个答案: