javascript - Typeahead 和 Bloodhound 动态改变局部值

Question

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

例如，当我选择其中一个元素时，我有一系列可用的建议，例如 [ "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

这是一个解决方案。你可以引用一下。希望能帮到你，我的 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/