正确更新 bootstrap-typeahead.js 中的源选项答案

【问题标题】：Properly update the source Option in bootstrap-typeahead.js正确更新 bootstrap-typeahead.js 中的源选项
【发布时间】：2012-11-26 15:02:20
【问题描述】：

在下面的demo中，插入“阿拉斯加”值后，源已更新，因此自动完成不再显示阿拉斯加值。

var newSource = this.source
                    .slice(0,pos)
                    .concat(this.source.slice(pos+1));
this.source = newSource;

无论如何，如果我从文本区域中删除阿拉斯加，值 Alaska 应该再次显示在源中。
如果用户从 textarea 中删除数据，任何提示如何恢复源数据？

我的想法是从

访问 options `source option

$('.typeahead').on('change', function () { })

有什么提示吗？

附：
我正在使用 jquery 和下划线

【问题讨论】：

标签： javascript jquery twitter-bootstrap underscore.js typeahead

【解决方案1】：

您可能应该更改您的 matcher 函数以测试已选择的状态：

var tabPresentStates = this.query.split(','),
    nbPresentStates = tabPresentStates.length;
for(var iState = 0; iState < nbPresentStates; iState++) {
   if(item === tabPresentStates[iState].trim())
       return false;
}

看到这个fiddle。

【讨论】：

【解决方案2】：

您可以使用排序器排除您已经选择的值，而不是更改源。

http://jsfiddle.net/BwDmM/71/

附注我可能会将您的代码包含在 Jasny 的扩展 Bootstrap http://jasny.github.com/bootstrap 的下一版本中：)

!function(source) {
    function extractor(query) {
        var result = /([^,]+)$/.exec(query);
        if(result && result[1])
            return result[1].trim();
        return '';
    }

    $('.typeahead').typeahead({
        source: source,
        updater: function(item) {
            return this.$element.val().replace(/[^,]*$/,'')+item+',';
        },
        matcher: function (item) {
          var tquery = extractor(this.query);
          if(!tquery) return false;
          return ~item.toLowerCase().indexOf(tquery)
        },
        highlighter: function (item) {

          var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
          return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
            return '<strong>' + match + '</strong>'
          })
        },
        sorter: function(items) {
          var beginswith = []
            , caseSensitive = []
            , caseInsensitive = []
            , existing = $.each(this.$element.val().split(','), function(i, val) { return val.trim() })
            , item

          while (item = items.shift()) {
            if ($.inArray(item, existing) >= 0) continue;

            if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
            else if (~item.indexOf(this.query)) caseSensitive.push(item)
            else caseInsensitive.push(item)
          }

          return beginswith.concat(caseSensitive, caseInsensitive)              
        }
    });

}(["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]);

【讨论】：

您有什么理由使用sorter 而不是matcher？我认为它致力于另一种治疗，不是吗？

【解决方案3】：

同意@SamuelCaillerie 使用matcher 的方法 - 这只是使用您的提取器功能。所以：

    updater: function(item) {
        return this.$element.val().replace(/[^,]*$/,'')+item+',';
    },
    matcher: function (item) {
      var previouslySelected = (this.query.indexOf(item) != -1); 
      var tquery = (previouslySelected ? "" : extractor(this.query));
      if(!tquery) return false;
      return ~item.toLowerCase().indexOf(tquery)
    },

【讨论】：