防止输入与Twitter预先输入建议值不同的值

Prevent entry of a value other than suggested with Twitter Typeahead

本文关键字：输入 Twitter      更新时间：2023-09-26

我在表单的不同位置使用Twitter Typeahead (http://twitter.github.io/typeahead.js)来简化文本输入中值的输入。但是，我有一个输入，我想禁止输入一个值，而不是预先输入。

虽然我通常会使用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中存在的值进行比较以检查是否匹配的任何指针?

我在寻找同样的答案时发现了这个线程。决定保留这个库并自己添加这个功能。

        $('.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. 在上更改，检查字段是否与可见建议匹配。
    4. 设置data-value为建议，否则为空属性。

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

我做了一些研究，在github上发现了这个问题，他们几乎说没有办法使用Typeahead/Bloodhound来做到这一点。

他们建议使用Chosen jquery插件或Select2 jquery插件，这两个插件看起来都能做你想做的事情。

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

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

相关文章：