Typeahead и Bloodhound динамически меняют локальные значения - PullRequest
Новая
       41

Typeahead и Bloodhound динамически меняют локальные значения

0 голосов
/ 08 января 2019

Я использую 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: выбранное событие: 

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

Но ни один из них не работает. У кого-нибудь есть идеи, как решить эту проблему?

1 Ответ

0 голосов
/ 17 января 2019

Это решение. Вы можете сослаться на это. Надеюсь на помощь, дружище :)) 

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/

...