jQuery for ajax検索リクエスト

Question

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つのシナリオのいずれかをトリガーする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> 

私が望んだすべてはsearch.phpに送信する#Qのコンテンツ用で、Q =とそれのために？データを返して#results divに配置します。私はまた、そこにいくつかの種類のタイマーを置くことを望んだので、人が任意の時間値で指定されたように入力が完了した後、または数秒ごとに文字が入力されるたびにサーバーに照会しません。一度人が入力を終えたら、明らかにサーバーを叩くのをやめてください。

私はインターネット上を見渡し、調査をしていないように見える場合は謝罪します。それどころか、私はちょうど昨日jQueryを学び始めました。

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

Answer 1

あなたはいつも数文字遅れているかもしれない理由はおそらくこれと関係があります。

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

これらの「バインド」アクションは、AJAXリクエストから多くの結果が返されるたびに積み重なっています。したがって、キーアップアクションが実行されるたびに、これらの異なる結果セットがすべて設定されます。それが意味をなさないかどうかはわかりませんが、それは一番簡単なコードではありません。

はそれが良く見える場合は、あなたのフェードイン（）および遅延（）でそれをfancying試すだけ

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

にこの部分を変更してみてください。テキストフィールド（ぼかし）を離れるとき、それは結果を非表示になりますように、これはそれを作るだろう

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

：あなたはおそらく追加したいと思うでしょう

もう一つは、このようなものです。