2011-12-07 16 views
0

jQueryの検索例により、サードパーティのPHPスクリプトからのオートコンプリートの文字列をつかむ:のjQuery + PHP:

<script> 
    $(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 
    }); 
</script> 

<div class="demo"> 
    <div class="ui-widget"> 
     <label for="tags">Tags: </label> 
     <input id="tags" /> 
    </div> 
</div> 
<!-- End demo --> 

<div class="demo-description"> 
    <p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> 
    <p>The datasource is a simple JavaScript array, provided to the widget using the source- option.</p> 
</div> 
<!-- End demo-description --> 

私はおそらく何かを必要とする以外、すべてそこオートコンプリートのコンテンツを持つ変数は、基本的だし、それは素晴らしいことだと少し複雑です。 var/xml/sqlからリストを提供する代わりに、サードパーティのPHPスクリプトによって発行されたエコーを取得する必要があります。

PHPスクリプトは、クエリに応じて適切な情報をエコーアウトします。すなわち、ユーザがcustomsearch.phpを探すか?q =レモン「パイナップル」をエコーする。

誰かが私を助けることができますか?

+0

マニュアルを読んでください。http://docs.jquery.com/UI/Autocomplete – goat

答えて

2

他のquestionに基づいて、検索結果を取得するためのAJAX呼び出しを行っていると仮定します。配列にそれらをロードし、あなたの例ではそれを置き換える:

<script> 
function GetSearchResults(){ 
    // make your ajax call here 
    $.ajax({ 
     async: false, 
     url: 'customsearch.php?q=Lemons', 
     success: function(data) { 
     var availableTags = []; 
     // build an array from the response data here 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 
     } 
    }); 
} 

$(function() { 
    var availableTags = GetSearchResults(); 
}); 
</script> 

<div class="demo"> 

<div class="ui-widget"> 
<label for="tags">Tags: </label> 
<input id="tags" /> 
</div> 

</div><!-- End demo --> 

<div class="demo-description"> 
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions  are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> 
<p>The datasource is a simple JavaScript array, provided to the widget using the source- option.</p> 
</div><!-- End demo-description --> 

は、理想的には、falseに非同期(async)設定されていないだろうが、私はあなたがコールバックに精通していない場合は、あなたの脳が爆発するしないようにしようとしています。

+0

コード内ですでに非同期コールバックを実行しています.Ajax内ですべてを作成した方が簡単ですDOMReadyコールバックを使用する代わりにコールバックを使用します。笑:) – Esailija

+0

実際にエサリヤ、あなたは間違っています。 Saraや他の開発者は、DOM内の情報から渡されたデータを構築している可能性があるので、DOMの準備が整うまで実行したくないかもしれません。あなたが示唆していることは、潜在的に安全でないことです。私はそれをお勧めしません。 –