用户输入文本输入时的html catch事件

Im just wondering how I go about catching the event when the user is typing into a text input field on my web application.

我只是想知道当用户在我的Web应用程序中输入文本输入字段时如何捕获事件。

Scenario is, I have a contacts listing grid. At the top of the form the user can type the name of the contact they are trying to find. Once there is more than 1 character in the text input I want to start searching for contacts in the system which contain those characters entered by the user. As they keep typing the data changes.

场景是,我有一个联系人列表网格。在表单的顶部,用户可以键入他们试图找到的联系人的姓名。一旦文本输入中有多个字符,我想开始在系统中搜索包含用户输入的字符的联系人。因为他们不断输入数据变化。

All it is really is a simple type ahead type functionality (or autocomplete) but I want to fire off data in a different control.

它实际上只是一个简单的类型提前类型功能(或自动完成),但我想在不同的控件中启动数据。

I can get the text out of the input once the input has lost focus fine, but this doesnt fit the situation.

一旦输入失去焦点,我就可以从输入中获取文本,但这不适合这种情况。

Any ideas?

Thanks

4 个解决方案

#1

Use the keyup event to capture the value as the user types, and do whatever it is you do to search for that value :

使用keyup事件在用户键入时捕获值,并执行搜索该值所做的任何操作:

$('input').on('keyup', function() {
     if (this.value.length > 1) {
          // do search for this.value here
     }
});

Another option would be the input event, that catches any input, from keys, pasting etc.

另一种选择是输入事件,它可以捕获任何输入,键,粘贴等。

#2

Why not use the HTML oninput event?

为什么不使用HTML oninput事件?

<input type="text" oninput="searchContacts()">

#3

I would use the 'input' and 'propertychange' events. They fire on cut and paste via the mouse as well.

我会使用'input'和'propertychange'事件。它们也可以通过鼠标进行切割和粘贴。

Also, consider debouncing your event handler so that fast typists are not penalized by many DOM refreshes.

另外,考虑对您的事件处理程序进行去抖动,以便快速打字员不会受到许多DOM刷新的惩罚。

#4

see my try:

看看我的尝试:

you should put .combo after every .input classes.

你应该在每个.input类之后加上.combo。

.input is a textbox and .combo is a div

.input是一个文本框,.combo是一个div

$(".input").keyup(function(){
    var val = this.value;
    if (val.length > 1) {
        //you search method...
    }
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});

$(".input").blur(function(){
    $(this).next(".combo").hide();
});

#1