Typeahead和Bloodhound动态更改本地值

Question

我正在使用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 ) );
});

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

Answer 1

这是一种解决方案。你可以参考它。希望能帮上忙，我的朋友：)

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/