検索/テキストボックスフィールドに入力された各文字に対してJavaScriptを実行するにはどうすればよいですか？

Question

私は、これは、ページ上の検索ボックス（テキスト）フィールドで、次のHTML

<form id="project-filter" class="aui ajs-dirty-warning-exempt"> 
 
    <div class="project-filter-item"> 
 
    <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value=""> 
 
    </div> 
 
</form>

を持っています。 ページが読み込まれるたびに実行されるJS関数があります。ページの内容は表のようです（見出しと表のデータ）。ただし、何かが検索ボックスに入力されたとき、JS関数が正しく実行されません。 （見出しのみが実行され、スクリプトはテーブル本体で実行されません）

文字が入力されるたびにJS関数を実行します。

私は以下のことをしようとしましたが、動作しません。

AJS.$('#project-filter-text').on('input', function() { 
 
    // Call my JS function. 
 
    setTimeout(removeProjectTypes, 0005); 
 
    return true; 
 
});

そして、この：

AJS.$('#text').keyup(function(event) { 
 
    if(AJS.$('#text').val() == true) {  
 
    // Call my JS function here 
 
    } 
 
});

私が何をすべきか上の任意の提案ですか？

Answer 1

あなたはonkeyupを使用

​​

Answer 2

を試みることができる：

<form id="project-filter" class="aui ajs-dirty-warning-exempt"> 
    <div class="project-filter-item"> 
    <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value="" onkeyup=search()> 
    </div> 
</form> 

とJSファイルにあなたの関数を追加します。私は、AJSが何であるかを知らない

function search() { 
    console.log('run'); 
} 

Answer 3

、 jqueryを使用すると、イベントを待機するメソッドに使用できます

$('#project-filter-tex').on('keyup',function(){ 
    // do something 
}); 

時々私も問題を抱えていた、そのjQuery.keyup()はうまくいきませんでした。どうして私に尋ねないでください。

Answer 4

$('#project-filter-text').keypress(function(e) { 
 
    if (e.which !== 0) { 
 
    console.log(String.fromCharCode(e.which)); 
 
    //Logic here 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="project-filter" class="aui ajs-dirty-warning-exempt"> 
 
    <div class="project-filter-item"> 
 
    <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value=""> 
 
    </div> 
 
</form>

Answer 5

<form id="project-filter" class="aui ajs-dirty-warning-exempt"> 
 
    <div class="project-filter-item"> 
 
    <input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value=""> 
 
    </div> 
 
</form> 
 

 

 
$('#project-filter').on('keyup', function() { 
 
console.log('This will run each time :)'); 
 
});

:)