Question

我在表单的不同位置使用Twitter Typeahead（http://twitter.github.io/typeahead.js），以便于将值输入到文本输入中。但是我有一个输入，我想禁止输入除typeahead建议的值以外的值。

虽然我传统上使用a来完成这样的任务，但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中存在的值进行比较的任何指针，以检查它是否匹配？

Answer 1

做了一些研究并在github上找到this issue，他们几乎说没有办法使用Typeahead / Bloodhound。

他们建议使用Chosen jquery plugin或Select2 jquery plugin两者，看起来他们会完全按照您的意愿行事。

此外，当我正在进行日常研究时，发现了一个名为Magic Suggest的插件，它有点不同，可能不是你想要做的，但可能值得一看。

希望我的回答有所帮助，祝你好运！

Answer 2

我在寻找相同的答案时找到了这个帖子。决定保留库并自己添加功能。

        $('.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', '');
            }

        })

如此工作：

在选择选项时，设置属性data-value以存储所选值。
在失去焦点字段上，将字段设置为data-value以强制它回到选定值（或为空，请参阅3）。
在更改上，检查字段是否与可见建议相匹配。将data-value设置为建议（如果有），否则为空属性。

也可以使用其他选项，但添加这些侦听器可以节省您移动到@joshhunt建议的其他库。

防止输入Twitter Typeahead以外的值

2 个答案: