javascript - 预先输入和猎犬可以动态更改本地值

我在Bloodhound中使用Typeahead(带有默认建议)，到目前为止一切正常。但是，当我尝试动态更改建议的值时遇到一些问题。

例如，当我选择其中一个添加到组合框的元素时，我有一系列可用的建议，例如[“A”，“B”，“C”]。但我想确保每个元素仅被选择一次。这就是为什么我要从列表中删除元素。因此，如果用户选择元素“B”，则可用建议列表应如下所示:[“A”，“C”]。
这是我尝试的代码:

var available_items = [ "Item 1", "Item 2", ... , "Item N" ];
var my_bloodhound = new Bloodhound(
{
  local: available_items,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  datumTokenizer: Bloodhound.tokenizers.whitespace
)};
$( "#my-typeahead-field" ).typeahead(
{
  minLength: 0,
  highlight: true
},
{
  name: 'items',
  limit: 10,
  source: search_function,
});
var f = function( )
{
  return available_categories.filter( element => !selected_items.includes( element ) );
}
function search_function( query, sync, async )
{
   if( "" === query )
   {
     sync( f )
   }
   else
   {
     my_bloodhound.search( query, sync);
   }
}

请注意，当用户选择建议列表的元素时，将填充数组“selected_items”。我尝试许多类似的方法:

http://jsfiddle.net/likeuntomurphy/tvp9Q/

或我使用typeahead:selected事件的事件:

$("#my-typeahead-field").bind('typeahead:select', function( event, item )
{
 console.log('Selection: ' + item);
 selected_items.push( item );
 available_categories = available_categories.filter( element => !selected_items.includes( element ) );
});

但是它们都不起作用。有谁知道如何解决这个问题？

最佳答案

这是一个解决方案。您可以引用。希望对您有帮助，我的 friend :))

var selected = [];
var available_items = [ "Item 1", "Item 2", "Item 3" ];

var select = function(e, datum, dataset) {
    selected.push(datum);
    $("#selected").text(JSON.stringify(selected));
    $("input.typeahead").val("");
}

var filter = function(suggestions) {
    return $.grep(suggestions, function(suggestion) {
        return $.inArray(suggestion, selected) === -1;
    });
}

var data = new Bloodhound({
    name: 'animals',
    local: available_items,
    datumTokenizer: function(d) {
      return Bloodhound.tokenizers.whitespace(d);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

data.initialize();

$('input.typeahead').typeahead(null,
    {
        name: 'animals',
        displayKey: function(item){
                    return item;
        },
     /* don't use
        source: data.ttAdapter(), */
        source: function(query, cb) {
            data.get(query, function(suggestions) {
                cb(filter(suggestions));
            });
        },
        templates: {
            empty: '<div class="empty-message">No matches.</div>'
        }
    }
).bind('typeahead:selected', select);

http://jsfiddle.net/mtLkns0e/