Bootstrap-select，类似 SO 标签字段的行为

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(","));添加元素