我现在拥有的:

所以我有这个HTML5 Datalist,里面有很多选项,我有2个事件被触发。 一个当用户键入一些匹配某些名称的东西时,这些名称填充了诸如“Rick Bross”或“Jack Johnson”(keyup)之类的选项。 当用户开始键入名称时,会弹出另一个事件,弹出,用户向下箭头,然后点击“输入”(更改)。

问题:

当用户点击其中一个下拉选项时,我需要触发一个事件,在他输入全名之前,以及在对象模糊之前。 如果用户在名称完全输出之前立即单击一个,则只有输入模糊后,2个事件才会触发该功能。

标记:

<datalist id="potentials">
    <option value="Rick Bross">  
    <option value="Jack Johnson">  
    <option value="Rick Bross">  
    <option value="Rick Bross">   
</datalist>

Javascript事件和功能:

window.checkModelData = function(ele)
{
    var name = $(ele).val().replace(" ", "");
    var mod = potentialModels[name];
    if(mod) {
        loadModelData(name);
    }
}

function loadModelData(name) {
    var mod = potentialModels[name];
    $("#address").val(potentialModels[name].address);
    $("#city").val(potentialModels[name].city);
    $("#state").val(potentialModels[name].state);
    $("#email").val(potentialModels[name].email);
    $("#phone").val(potentialModels[name].phone);
    $("#zip").val(potentialModels[name].zip);
}

$("#name").keyup(function(){

    window.checkModelData(this);

});
$("#name").change(function(){

    window.checkModelData(this);
});

===============>>#1 票数:18 已采纳

使用input事件而不是其他事件。 它实际上是为了满足您的需求而设计的:

$("#name").bind('input', function () {
    window.checkModelData(this);
});

我为你试了一下jsfiddle

===============>>#2 票数:0

您还可以在输入字段上收听“选择”事件。

$('#name').bind('select', function() {
    // handle input value change
});

===============>>#3 票数:-1

要处理单击事件,这里是解决方案。

$("#book_search").bind('select', function () {
    alert("changed");   
});

  ask by Rick Bross translate from so

未解决问题?本站智能推荐:

2回复

有没有办法在HTML5数据列表选项上应用CSS样式?

我想修改显示数据列表中不同选项列表的方式。 是否可以在其上应用某些CSS属性? 我试过了 option { background: red; } 但它似乎不起作用。
1回复

HTML5 datalist - 模拟click事件以公开所有选项

当单击一个按钮使输入元素成为焦点时,我试图自动向用户显示datalist html5元素的所有选项。 通常,当用户单击两次关联的文本输入元素时,将显示所有选项。 我想以编程方式模拟此行为,以便用户可以在开始键入之前查看所有选项。 我尝试通过使用$('#text-input').focu
1回复

html5数据列表选项上的事件单击

我需要一个带有html5输入的数据列表,并且我想在用户单击数据列表的一个选项时创建另一个事件。 我试过了,但是不起作用:( 这是我的代码的一部分: 无论我尝试使用哪种jQuery代码,我都无法创建最简单的结果作为alert()。 我没有抛出异常,我尝试激活的事件未被识别。
1回复

使用html5 datalist自定义自动完成功能

我正在使用html datalist来自动填充一些数据。 我想要一个行为,它应该过滤除一个默认值以外的所有内容。 以下是示例代码: 在上面的内容中,默认情况下,如果我键入s,它将仅显示圣何塞和旧金山,当我键入n时,它将仅显示纽约。 我的要求是,在任何情况下,无论输入什么,它应该
2回复

当建议清单很大时,html5数据清单不会下拉

我使用数据列表为特定的文本输入建议数据选择,但是当数据列表的大小太大时(我尚不知道正确的数字,但是很确定当大小大于40时会发生这种情况) 。 我使用数据列表如下 这里显示了当大小不是“太大”时,单击向下箭头按钮时数据列表可以下拉。 但是,如果数据列表“太大”(在此示例中,
2回复

如何只显示datalist HTML5中的文本而不是值?

这是一个例子: http://jsfiddle.net/j7ehtqjd/1/ 我想要实现的是当我点击输入元素时,不会显示该值 ,而只显示文本 (即1,2,3,4,5)。 即值应隐藏,就像使用常规下拉列表一样( <select>元素)。 这个自动完成功能是必要的
2回复

在文本框的单击事件上触发数据列表选项

单击相应的文本框时如何显示或触发数据列表选项? 我有一个带有10个选项的数据列表。在chrome中,显示了一个下拉图标,允许用户知道它具有一个下拉列表。 但是在firefox中,该图标不可用。因此,用户可能不知道它是一个下拉列表,而只是一个文本框。因此,我想在单击该文本框时显示数据列表选项。
3回复

如何验证html5 Datalist的输入?

我想知道如何验证来自Datalist的输入值。 我的意思是,如果我有一个Datalist ,用户可以开始写一个值,然后从Datalist选择它,但是用户决定不从列表中选择任何值,并且他提交了具有不完整值的表单,发送的价值将是错误的。 我想过迭代Datalist所有元素,但我认为如果Dat
2回复

innerHTML不起作用 IE中的HTML5元素

我试图通过单击按钮动态地向HTML表添加行。 我的表有一个HTML5 datalist元素的列。 当最初使用默认第一行加载页面时,我可以在datalist中看到下拉列表值。 但是对于按钮datalist添加的所有新行都不起作用。 下面是我的表和JavaScript添加行。 Ja
2回复

从datalist中选择项目时触发事件,而不是在键入时触发事件

我有一个这样的表格: 用户可以从数据列表中选择一个项目 - 或者 - 可以键入它自己的值。 我通过对PHP脚本的JSON调用连接到数据库,以填写表单其余部分的其他信息。 我希望在用户在list-input中键入名称时触发(因此当内容模糊时)或者当用户从datalist中单击选项时。