Typeahead and Bloodhound dynamically change local values

Question

I am using Typeahead (with default suggestions) with Bloodhound and everything works fine so far. However, I have some problems when I try to dynamically change the values of the suggestions.

For example, I have an array of available suggestions like [ "A", "B", "C"] when I select one of those elements it is added to a combo box. But I want to ensure that each element is only selected once. That's why I want to remove the element from the list. So if a user chooses the element "B" the list of available suggestions should look like: ["A", "C"]. Here is the code that I try:

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);
   }
}

Please note that the array "selected_items" is filled when a user select an element of the suggestion list. I try many different approachs like this:

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

or the one where I use the typeahead:selected event:

$("#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 ) );
});

But none of them works. Does anyone have an idea how to fix this problem?

Is it really `return available_categories.filter( element => !selected_items.includes( element ) );`? Shouldn't it be available_items? — M M, Jan 16 '19 at 16:07
@MM yes sorry. This was a typo. I will create a jsfiddle and posting it in a bit. — Der edle weiße Ritter, Jan 18 '19 at 13:56
@IslamElshobokshy Here is the fiddle http://jsfiddle.net/obx3k0qr/8/ and below you can find a more detailed version of what I try to achieve. — Der edle weiße Ritter, Jan 18 '19 at 15:10
@ChristophM. I came up with [this](http://jsfiddle.net/gd9xy546/), I was able to remove the values chosen from the array, but I wasn't able yet to update the local, I might see on monday the rest. Till then you could try to work on this fiddle example :) — Alexandre Elshobokshy, Jan 18 '19 at 16:26
@IslamElshobokshy Thanks for you help so far. I also was able to remove the choosen value from the array but not update the local.... — Der edle weiße Ritter, Jan 21 '19 at 13:38

score 0 · Answer 1 · answered Jan 17 '19 at 07:51

It's a solution. You can refer it. Hope to help, my 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/

I also found this answer on stackoverflow ;) But my problem is that when the field is empty it should display 10 Items by default. And when I want to do this then it isn't working anymore. — Der edle weiße Ritter, Jan 18 '19 at 12:38

Typeahead and Bloodhound dynamically change local values

1 Answers1