Bootstrap 3 typeahead.js — запрос по части typeahead val

Я пытаюсь вызвать свой удаленный URL-адрес с последней частью входного значения. Я хотел бы сделать что-то вроде этого:

    $('#typeahead').typeahead({
    remote: {
        url: '/ajax/tags/get/?name=%QUERY',
        replace: function (url, query) {
            var last = query.split(',');
            last = $.trim(last[last.length-1]);
            return url.replace('%QUERY', last);
        }
    },
    limit : 10
});

и когда выбран элемент раскрывающегося списка,

введите здесь описание изображения

добавить новое значение в конец строки

введите здесь описание изображения

Любая идея, как заставить это работать?


twitter-bootstrap twitter-bootstrap-3 typeahead.js typeahead bootstrap-typeahead
person Daniil Mashkin    schedule 19.08.2013    source источник
comment
Возможно, вы захотите учесть, что вам также необходимо сначала получить все значения, разделенные запятыми, во входных данных и удалить их из результирующего набора данных.. до использования последнего входного значения для отображения списка предложений, если только вы не планируете разрешать дубликаты. Вам также, вероятно, придется отключить автозаполнение/подсказку? так как я предполагаю, что это повлияет на ваш вклад.   -  person Pricey    schedule 24.10.2013

Ответы (2)


arrow_upward
1
arrow_downward

Для Bootstrap 3 вы можете использовать Bootstrap-3-Typeahead.

Вам придется перезаписать функции updater и matcher. Для функции matcher вы можете использовать код из функции замены следующим образом:

matcher: function (item) {
        var last = this.query.split(',');
        this.query = $.trim(last[last.length-1]);

        if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase());
}

Используйте следующий код для своего update:

updater: function (item) {
      return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ',';
    }

(соответствовать последнему вхождению из: JavaScript: заменить последнее вхождение текста в строка )

Полный пример:

$('.typeahead').typeahead (
{
items: 4,
source: function (query, process) {
    states = [];
    map = {};


    var data = [
        {"stateCode": "CA", "stateName": "California"},
        {"stateCode": "AZ", "stateName": "Arizona"},
        {"stateCode": "NY", "stateName": "New York"},
        {"stateCode": "NV", "stateName": "Nevada"},
        {"stateCode": "OH", "stateName": "Ohio"}
    ];

    $.each(data, function (i, state) {
        map[state.stateName] = state;
        states.push(state.stateName);
    });

    process(states);

}

  , updater: function (item) {
      return this.$element.val().replace(new RegExp(this.query + '$'),'') + item + ',';
    }
    , matcher: function (item) {
        var last = this.query.split(',');
        this.query = $.trim(last[last.length-1]);

        if(this.query.length) return ~item.toLowerCase().indexOf(this.query.toLowerCase());
    }
    }

);
person Bass Jobsen    schedule 20.04.2014

arrow_upward
0
arrow_downward

Предполагая, что «запрос с последней частью» работает для вас, вы можете использовать filter: function(response) {...} для заполнения и возврата массива данных, которые имеют соответствующие value и title, чтобы делать то, что вы хотите.

person Nitzan Shaked    schedule 29.08.2013