Запретить ввод значений, отличных от предложенных, с помощью Twitter Typeahead

Я использую Twitter Typeahead (http://twitter.github.io/typeahead.js) в разных местах формы, чтобы упростить ввод значений в текстовые поля. Однако у меня есть один вход, где я хочу запретить ввод значения, отличного от того, которое предлагается typeahead.

Хотя я традиционно использовал бы для такой задачи, Typeahead обеспечивает гораздо лучший пользовательский интерфейс.

В настоящее время у меня есть следующий код для запуска Typeahead:

var countries = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        prefetch: {
            url: '/assets/data/countries.json',
            filter: function(list) {
                return $.map(list, function(country) { return { name: country }; });
            }
        }
    });
countries.initialize();
$('input[name="member_country"].typeahead').typeahead(null, {
        name: 'countries',
        displayKey: 'name',
        source: countries.ttAdapter()
    }).on("typeahead:selected typeahead:autocompleted", function (ev, datum) {
        console.log(datum);
    });

Любые указатели на то, как я могу сравнить выбранное значение с теми, которые присутствуют в JSON, который я загружаю для ввода, чтобы проверить, соответствует ли оно?


javascript twitter-bootstrap twitter typeahead
person Nathan Pitman    schedule 19.05.2014    source источник
comment
На каком этапе будет сравнение? Пока они печатают (постоянно проверяют, а потом показывают ошибку)? Когда они отправляют форму (а затем показывают ошибку)? Или он не позволит им ввести следующую букву, если она не соответствует строке из вашего списка?   -  person joshhunt    schedule 20.05.2014
comment
Хм, я думаю, что в идеале было бы проверять, как они печатают, и предотвращать ввод любого значения, не входящего в массив JSON. :)   -  person Nathan Pitman    schedule 21.05.2014

Ответы (2)


arrow_upward
1
arrow_downward

Провел небольшое исследование и нашел эту проблему на github, в которой, по их словам, есть нет возможности сделать это с помощью Typeahead/Bloodhound.

Они рекомендуют использовать плагин Chosen jquery или Select2 jquery plugin, оба из которых выглядят так, как будто они будут делать именно то, что вы от них хотите.

Кроме того, когда я проводил свои ежедневные исследования, я нашел плагин под названием Magic Suggest, который немного другой и, возможно, не совсем то, что вы пытаетесь сделать, но, возможно, стоит посмотреть.

Надеюсь мой ответ поможет и удачи!

person joshhunt    schedule 21.05.2014
comment
Спасибо, посмотрю оба. Как вы говорите, кажется вероятным, что на этот вопрос нет реального ответа. :) - person Nathan Pitman; 23.05.2014

arrow_upward
2
arrow_downward

Я нашел эту тему, когда искал тот же ответ. Решил оставить библиотеку и добавить функционал самостоятельно.

        $('.typeahead')
          .on('typeahead:select', function(ev, suggestion) {
              $(ev.target).attr('data-value', suggestion);
          })
          .on('blur', function(ev) {
            var target = $(ev.target);
            target.val(target.attr('data-value'));
          })
          .on('typeahead:change', function(ev) {

            var target = $(ev.target),
                id = '.tt-dataset-' + ev.target.id + ' .tt-suggestion'; // visible suggestions div

            var suggestions = $(id).map(function() {return $(this).text();} ).get();
            var i = $.inArray(target.val(), suggestions);

            if(i >= 0) {
                target.attr('data-value', suggestions[i]);
            } else {
                target.attr('data-value', '');
            }

        })

Работает таким образом:

  1. При выборе параметра установите атрибут data-value для сохранения выбранного значения.
  2. В поле потеря фокуса установите для поля значение data-value, чтобы вернуть его к выбранному значению (или пустому, см. 3).
  3. При изменении проверьте, соответствует ли поле видимому предложению. установите data-value в предложение, если это так, иначе пустой атрибут.

Можно использовать и другой вариант, но добавление этих слушателей может избавить вас от перехода в другую библиотеку, как предложил @joshhunt.

person Searle    schedule 19.02.2018