25

ユーザーがWebアプリケーションのテキスト入力フィールドに入力しているときに、イベントをキャッチする方法を知りたいと思っています。

シナリオは、連絡先リストグリッドがあります。フォームの上部で、ユーザーは検索しようとしている連絡先の名前を入力できます。テキスト入力に複数の文字が含まれている場合、ユーザーが入力した文字を含む連絡先の検索をシステムで開始したいと思います。彼らがタイプし続けると、データが変化します。

本当に単純なタイプアヘッドタイプの機能（またはオートコンプリート）だけですが、別のコントロールでデータを起動したいと思います。

入力がうまくフォーカスを失ったら、入力からテキストを取り出すことができますが、これは状況に適合しません。

何か案は？

ありがとう

4

4 に答える 4

24

keyupイベントを使用して、ユーザーが入力したときに値をキャプチャし、その値を検索するために行うことは何でもします。

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

もう1つのオプションはinput、キー、貼り付けなどからの入力をキャッチするイベントです。

于 2012-12-11T21:04:25.907 に答える
21

HTML の oninput イベントを使用しないのはなぜですか?

<input type="text" oninput="searchContacts()">
于 2016-04-17T12:07:36.697 に答える
6

「input」および「propertychange」イベントを使用します。マウスによるカット アンド ペーストでも起動します。

また、多くの DOM 更新によってタイピストが不利にならないように、イベント ハンドラーをデバウンスすることを検討してください。

于 2012-12-11T21:07:26.947 に答える
0

私の試みを見てください：

すべての .input クラスの後に .combo を配置する必要があります。

.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();
});
于 2012-12-11T21:12:34.473 に答える