Twitter typeahead добавляет пользовательские данные в набор данных

Изменить версию 2

Я снова выполнил рефакторинг, теперь все работает идеально.

Я удалил свои предыдущие правки и реорганизовал функцию onEnterKeyed следующим образом.

var dataSet = this.dropdown.datasets[0];

// childHTML is replaced by childDom
// var childHTML='';
var childDom = $('<div></div>');
$('.ttchild').remove();
$.each(cursorDatum.raw.childCategories,function(i,v){

    var div = $('<div class="tt-suggestion ttchild"></div>');
    div.append('<div class="suggestions"><span>'+this.value+'</span></div>');


    var suggestion = v;

    // TODO console log this is duplicated from dataset
    var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";


    // this is what makes it show in the input box
    // set these data for the child element.
    div.data(datasetKey, dataSet.name);
    div.data(valueKey, dataSet.displayFn(suggestion));
    div.data(datumKey, suggestion);

    childDom.append(div);
});

// childHtml is replaced by childDom
$('.tt-cursor').append(childDom.children());

Правка версии 1 устарела

Я выполнил рефакторинг своего решения, и теперь оно работает должным образом.

Я удалил свои предыдущие правки и добавил эту строку в метод getSuggestionNode.

for (var key in suggestion.childCategories) {
    var value = suggestion.childCategories[key];
    $el.append(getSuggestionNode(value));
}

Устарело ниже

Я решил вашу проблему, хотя она требует доработки с вашей стороны.

// I added this line
// add the child nodes to the suggestions.
suggestions = suggestions.reduce(function(res, num) { res.push(num); for (var i=0;i<num.children;i++) res.push(num.childCategories[i]);  return res; }, [])

// nodes are calculated based on suggestions
// but child nodes are not added to suggestions so their data is not set (see below line)
nodes = _.map(suggestions, getSuggestionNode);

// inside the suggestions.map function
// here .data sets the necessary values required to render the input on cursor change.
// since child nodes are not mapped they are ignored.
$el = $(html.suggestion).append(that.templates.suggestion(suggestion))
    .data(datasetKey, that.name)
    .data(valueKey, that.displayFn(suggestion))
    .data(datumKey, suggestion);

Таким образом, вам не нужна пользовательская функция updateChild, хотя я не знаю, как вы реализуете раскрывающийся список, это решение добавит дочерний элемент в раскрывающийся список и сразу же покажет их, не нажимая клавишу ввода в родительском узле. Вы должны настроить это самостоятельно.

Здесь другой подход

Вы можете рассматривать каждую группу childCategories как собственный источник данных. Затем используйте парадигму Multiple Datasets, чтобы автоматически применять заголовок для дочерних Предметы.

Второй параметр $.typeahead(options, [*datasets]) принимает массив наборов данных. Мы можем преобразовать каждый набор дочерних элементов в собственный набор данных следующим образом:

var dataSources = [];
$.each(movies, function(index, movieItem) {
    if (movieItem.childCategories) {
        var bloodhoundEngine = createBlounhoud(movieItem.childCategories, 'value');
        var dataSource = {
            name: movieItem.value,
            displayKey: 'value',
            source: bloodhoundEngine.ttAdapter(),
            templates: {
                header: '<h3 class="typeahead-group">' + movieItem.value + '</h3>'
            }
        };
        dataSources.push(dataSource);
    }
});

Обратите внимание, что мы определили шаблон заголовка для элементов в этом источнике данных. Мы можем стилизовать его следующим образом:

.typeahead-group {
  margin: 0 20px 5px 10px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

Элементы, которые не были частью дочерней группы, могли быть добавлены как часть одного источника данных ungrouped:

var ungrouped = [];
$.each(movies, function(index, movieItem) {
    if (!movieItem.childCategories) {
        ungrouped.push(movieItem);
    }
});

function addUngroupedItems() {
    var bloodhoundEngine = createBlounhoud(ungrouped, 'value');
    var dataSource = {
        name: 'ungrouped',
        displayKey: 'value',
        source: bloodhoundEngine.ttAdapter()
    };
    // add to first position of array so it doesn't look like it's part of the group above it
    dataSources.unshift(dataSource);
};

Преимущество этого решения состоит в том, что он минимально переопределяет существующий код typeahead и Bloodhound, работая в рамках платформы для обеспечения функциональности группировки.

Кроме того, он предоставляет интуитивно понятный пользовательский интерфейс для пользователей, которые могут знать название дочернего элемента, который они ищут, но не хотят щелкать по каждой категории, чтобы найти его. Большинство локальных поисков могут тривиально выполнять поиск по всем полям.

Рабочая демонстрация в jsFiddle