0

私はjQueryに関してはやや初心者であり、それを理解するために最善を尽くしています. 以下は、フィードバックをお待ちしております 2 つのコードです。私の最終的な目的は、ボックスに入力された内容を照会することです。以下の 2 つのコードで 2 つの問題についてそれぞれ説明します。

function update_results(){
$.ajax({
    url: '{base}modules/search.php?q=' + $("#q").val(),
    success: function(data) {
    $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); } ).keyup();
 }
});
}

このコードは、リクエストがサーバーとのループにスローされると、ブラウザの速度を大幅に低下させますが、完全に機能します (入力された文字に追いつきます)。

function update_results(){
$.ajax({
    url: '{base}modules/search.php?q=' + $("#q").val(),
    success: function(data) {
    $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); } );
 }
});
}

このコードにはループの問題はありませんが、search.php ページに送信されるクエリを入力すると、常に最後の 2 ～ 3 文字が欠落します。

上記の 2 つのシナリオのいずれかをトリガーする HTML 要素を次に示します。

<h3>Site Search</h3>
    <input id="q" type="text" onkeyup="update_results()" value="Type in a search term..." onFocus="this.value='';" /><br>
    <a href="javascript:clear_results();">(Reset)</a> | <a href="search/">(Advanced Search)</a>
    <div id="results" style="text-align: left; font-size: 11px;"></div></center>
    </div>

私が望んでいるのは、 #q のコンテンツが search.php?q= に送信され、データが返されて #results div に配置されることだけです。また、何らかのタイマーをそこに配置したかったので、任意の時間値で指定されたとおりに入力が完了した後、または数秒ごとにのみ、文字が入力されるたびにサーバーにクエリを実行しません。その人が入力を終えたら、明らかにサーバーへの攻撃をやめさせたいと思っています。

インターネットで調べてみましたが、調べていないように見えたら申し訳ありません。それどころか、昨日jQueryを学び始めたばかりです。

お時間をいただきありがとうございます。これが本当に初心者の質問である場合は、事前にお詫び申し上げます。

4

1 に答える 1

0

あなたが常に数文字後ろにいる理由は、おそらくこれと関係があります.

success: function(data) {
    $('#q').bind('keyup', function() { $('#results').fadeIn(400).delay(500).html(data); } ).keyup();
}

これらの「バインド」アクションは、AJAX 要求から返される結果が増えるたびに積み重なっていきます。したがって、keyup アクションが発生するたびに、これらのさまざまな結果セットがすべて設定されます。意味があるかどうかはわかりませんが、従うのが最も簡単なコードではありません。

この部分をちょうどに変更してみてください

success: function(data) {
    $('#results').show().html(data);
}

それが良さそうに見える場合は、fadeIn() と delay() を使って派手にしてみてください。

おそらく追加したいもう1つのことは、次のようなものです。

$('#q').blur(function(){ $('#results').hide() });

これにより、テキスト フィールドを離れると (ぼかし)、結果が非​​表示になります。

于 2012-05-13T05:04:30.823 に答える