2012-01-13 3 views
2

jQueryを使用してGoogleと同様の検索機能を作成したいと考えています。しかし、私はその特徴の1つの名前が不明です。jQueryオートコンプリート/予測型google

問題の特徴は、テキスト予測要素です。

例えば、私がjqueryを入力すると、入力ボックスに "Jquery"という入力が表示されますが、灰色では入力ボックスに最初の結果のテキストが追加され、ユーザはこの "予測値"を選択できます

私は検索しましたこの機能の名前と実際の例については、高値と低値があります。

任意の助けを大幅に何を求めていることは、オートコンプリートのプラグインです

+0

これはあなたが探しているものだと思います。http://stackoverflow.com/questions/3875079/jquery-and-grails-html-make-text-field-complete-text-like-google-does(ここに例があります:http://jsfiddle.net/QU9st/) – Quasdunk

+0

おそらくそれは? http://www.devbridge.com/projects/autocomplete/jquery/ – pltvs

+1

ほぼ!しかしそれほど好きではない、それはそれ自身のスタイルで入力ボックスに入力する必要がある、私は持っている問題は、提案のスタイリングです – Coops

答えて

7

あなたはオートコンプリート機能を探しています。 jQuery UIには素晴らしいオートコンプリート機能が含まれています。あなたは(サーバーページを通して)配列またはデータベーステーブルから取得することができます

http://jqueryui.com/demos/autocomplete/

検索の結果.ITが

以下のように以下の例を設定することは非常に簡単です使用しているが配列を自動提案項目のデータソースとして使用します。

$(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "Scheme" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 

上記のコードは、idが "tags"のテキストボックスをオートコンプリート機能にバインドします。ソース値は、異なるプログラミング言語の名前が格納されている配列の名前として述べました。

ほとんどの場合、データベースからデータを取得し、中間サーバーページをデータソースとして使用する必要があります。このサーバーページはデータアクセスレイヤーからデータを取得し、結果を提供します。

$("#tags").autocomplete({ 
      source: "searchtags.php", 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.value + " aka " + ui.item.id : 
        "Nothing selected, input was " + this.value); 
      } 
     }); 
+0

ちょうど更新Guys、私はJqueryのUIのオートコンプリートプラグインを理解し、それは私が追加している機能ですが、この質問は、 INPUTボックスにテキストを表示します。私はスクリーンショットをアップロードするだろうが、それは私に許可されません。 – Coops

+0

@Coops:異なるスタイルのテキストを表示するには、そのアイテムのCSSスタイルを更新するだけです。現在のスタイルが何であるかを知るためにfirebugを使用し、そこでCSSを更新してください。 thatsそれ – Shyju

+0

しかし、あなたは入力内のテキストの部分ではなく、入力だけをスタイルすることができます。したがって、javascriptの解決策を探します – Coops

2

をいただければ幸いです。そこいくつかありますが、「公式の1」は、このjqueryのオートコンプリートです:http://docs.jquery.com/Plugins/Autocompleteとコード:

$("#example").autocomplete(data); 
+2

いいえ、それは[jQuery UI one](http://jqueryui.com/demos/autocomplete/)です。しかし、私はまだいくつかのプロジェクトを実行しています(bassistance.deの1つ) – Rup

1

私が見つけた最も近いのはjQueryオートコンプリートです。あなたはGoogleのようなものを見つけましたか?