Javascript 如何在输入更改事件之前获取引导类型预选单击结果

我尝试使用引导typeahead作为用户的灵活选择。因此，如果项目已知，他们会选择它，如果不知道，会打开一个对话框，允许他们输入一个新项目

我这样做是通过观察输入上的更改事件，如果输入val不在源数组中（对于typeahead），则向用户显示“additem”对话框。问题是，如果用户单击其中一个选项，则在typeahead有机会设置val之前会发送一个更改事件。这是因为单击会导致文本模糊

我想检查活动元素来解决这个问题，所以在change事件中查看document.activeElement，看看它是否是typeahead选项之一，这不起作用，返回了整个body元素

以下是代码的精简版本：

Html

×
未知联系人
您输入的联系人未知。按“取消”输入其他联系人，或填写以下详细信息以创建新联系人

名称
电子邮件
接近
保存更改

Javascript

var contacts = ['pete','geoff'];

$('.typeahead').typeahead({source:contacts, updater : function(item){
    console.log('updater fired'); //fires after first change event
    return item;
}});

$('input').change(function(ev){
    console.log($(ev.target).val());

    if ($.inArray($(ev.target).val(), contacts) < 0)
        $('#contactModal').modal();
})

var contacts=['pete'，'geoff']；
$（'.typeahead'）.typeahead（{source:contacts，updater:function（item）{
console.log（'updater fired'）；//在第一次更改事件后激发
退货项目；
}});
$（'input'）。更改（功能（ev）{
log（$（ev.target.val（））；
if（$.inArray（$（ev.target.val（），contacts）<0）
$（'#contactModal'）.modal（）；
})

和一个JSFIDLE版本

---

有人知道我如何测试用户是否单击了某个预先输入，以确定是否是该类型导致了更改事件吗？

我之前的建议实际上没有起作用，因为正如您所提到的，在菜单上单击

之前，有一个意外的
模糊事件触发了
更改
。我假设它与
this.hide（）
调用
Typeahead.prototype.select方法中的
this.hide（）有关

然而，经过一点尝试和错误，我确实认为我可能已经找到了一个解决方案。导致问题的实际上不是
select
方法中的
this.hide（）
调用。知道用户可以通过两种方式触发选择，有助于理解希望的解决方法（我只在Chrome中测试过）：使用键盘，如按enter键或单击项目。因此，我知道单击是这两个问题中的一个，我注意到当用户将鼠标移到下拉列表上时，
mousedover
事件会保持不变

因此，可以在
change
事件中手动忽略异常行为。为了简化确定下一个
更改
事件的实际原因的过程，我使用了一个名为“
selected
”的不同（自定义）事件来表示用户更改了值，而不是标准的
更改
。不幸的是，当
mousedover
属性为
true
时，您仍然必须手动忽略
change
事件：

简化的HTML（我使用了
p
标记，因为我发现Chrome在调试JSFIDLE的JavaScript时有问题，并且与控制台结合会导致糟糕的结果）：

作为参考，这是默认的
select
方法：

select: function () {
  var val = this.$menu.find('.active').attr('data-value')
  this.$element
    .val(this.updater(val))
    .change()
  return this.hide()
}

解决此问题的更简单方法是在单击事件中包含以下内容：

var typeahead = $(this).data("typeahead");
if (typeahead && this.value != typeahead.$menu.find('.active').attr('data-value')) 
  return;

第一行将检索已附加的typeahead。第二个将确保当前值与所选值匹配

您还可以在if中检查
typeahead.mousedover
，以允许无效（即不是typeahead选项）输入在控件失去焦点而未进行选择时仍触发默认更改行为。
。但是，如果您将支票更新为以下内容，则不需要重写select函数：
如果（typeahead.mousedover&&typeahead.show）
mousedover
在typeover菜单关闭时未更新为false。。。但显示的是更新的。
var contacts = ['pete', 'geoffrey'];

var $text = $("#text");
var typeahead = $('.typeahead').typeahead({source: contacts}).data('typeahead');

typeahead.select = function () {
    var val = this.$menu.find('.active').attr('data-value');
    this.$element.val(this.updater(val))
        .trigger('selected'); // <- unique event
    return this.hide()
};

$('input.typeahead').on('change', function (e) {
    var $target = $(e.target);
    if (typeahead.mousedover) {
        $text.html($text.html() + "mousedover [ignored selection]<br />");
    }
    else if ($.inArray($target.val(), contacts) < 0) {
        $text.html($text.html() + "show add<br/>");
    }
}).on('selected', function () {
    $text.html($text.html() + "selected<br />");
});

select: function () {
  var val = this.$menu.find('.active').attr('data-value')
  this.$element
    .val(this.updater(val))
    .change()
  return this.hide()
}

var typeahead = $(this).data("typeahead");
if (typeahead && this.value != typeahead.$menu.find('.active').attr('data-value')) 
  return;