3

私が次のコードを持っているとしましょう：

HTML：

 <form name="searchForm">
   <input type="text" id="Fruit" name="getFruit"/>
 </form>

Javascript：

function Fruit(name, color){
  this.name = name;
  this.color = color;
};

var database = {};
database['banana'] = new Fruit("Banana", "Yellow");
database['apple'] = new Fruit("Apple", "Red");
database['orange'] = new Fruit("Orange", "Orange");
database['apple pear'] = new Fruit("Apple Pear", "Green");

オートコンプリート機能を使用して、ユーザーが「apple」と入力した場合に、ドロップダウンメニューから「apple」または「applepear」を選択し、クリックしたときにフォームのテキストボックスに入力するオプションを提供するにはどうすればよいですか。あなたが何かをタイプしようとするとき、グーグルがどのように提案をするかのようなものです。

jquery http://jqueryui.com/autocomplete/を使用したいと思っていましたが、実装方法がわかりません。

$( "#Fruit" ).autocomplete({
      source: database // How would you implement this?
    });

これは私の完全なコードではありませんが、前回すべてのコードを投稿したときに読むには多すぎたので、これを作成して、私がやろうとしていることの例を示しました。

4

2 に答える 2

5

あなたは正しい軌道に乗っています。jQuery UI のオートコンプリート ウィジェットは、選択するアイテムの配列を受け取ります。jQuery の map メソッドを使用して、データベース オブジェクトをキーの配列にマップし、それをオートコンプリート ソースとして使用できます。

 <form name="searchForm">
   <input type="text" id="Fruit" name="getFruit"/>
 </form>

function Fruit(name, color){
  this.name = name;
  this.color = color;
};

var database = {};
database['banana'] = new Fruit("Banana", "Yellow");
database['apple'] = new Fruit("Apple", "Red");
database['orange'] = new Fruit("Orange", "Orange");
database['apple pear'] = new Fruit("Apple Pear", "Green");

var source = $.map(database, function(val, i) {
  return i;
});

$( "#Fruit" ).autocomplete({
      source: source
});

jsFiddle で試してみてください。

于 2013-02-12T18:46:57.747 に答える
0

Twitter Bootstrap には、それを行う素晴らしい jQuery プラグインがあります: http://twitter.github.com/bootstrap/javascript.html#typeahead

使うだけ

$( element ).typeahead( { source: arrayOrFunction } );

それはかなりよく文書化されているので、あなたはそれを理解できるはずです. =)

jQuery UI のオートコンプリートも同様の方法でこれを行います。文字列の配列またはクエリを最初のパラメーターとして受け取り、コールバックを 2 番目のパラメーターとして受け取る関数を渡し、オートコンプリート オプションを指定してコールバックを呼び出すだけです。

于 2013-02-12T18:45:09.043 に答える