Chosen: リモートデータソースからフェッチ

これは、jqueryのオートコンプリートよりも少し優れていますね。 最終的にリモートデータソースを確認したい（検索結果のコールバックを提供する機能）

私はこのリクエストの3番目です。 これは、jQueryUIオートコンプリート機能のようにリモートソースを指定する機能があると非常に便利です。

または、さらに良いかもしれません：jQueryUIに選択したものを含めます。 :)

+1

より具体的には、私の+1は、フリーテキストエントリでリモートデータソースを使用するというアイデアのためのものです（たとえば、タグ付けを支援するためにajax呼び出しを使用する）

申し訳ありませんが、十分に明確ではありませんでしたが、「リモートデータソース」の統合は、それを指摘してくれてありがとう、私が最初に意味したものです。 もちろん、このプラグインはjQueryオートコンプリート機能よりもはるかに優れています。 daFishがコメントしたように、これをjQueryUI自体の一部として見たいと思います。

リモートデータソースサポートの+1

わかりません。 選択されるのは、オートコンプリートやリモートデータのフェッチではなく、 SELECT要素の使いやすさと美しさの向上です。 リモートデータが必要な場合は、選択した呼び出しの前に収集してdeDOMに入れてください…

@juanghurtado ：300Kのアイテムを含む複数選択ボックスがある場合、実際にはHTMLに完全に書き出すことはできません。 Chosenは、検索と選択に最適なインターフェイスを提供します。 この機能を提供するライブラリは他にもたくさんあります。つまり、[1]、[2]などです。 これらすべてのChosenの中で最もよく機能しますが、非常に大きなコレクションをサポートしていません。これは、リモートデータソースサポートが追加するものです。 また、Chosenがこれをサポートしている場合は、2つではなく1つのプラグインをスキンして最新の状態に保つ必要があります。

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

SELECTアイテムに300kのアイテムがある場合、（IMHO）何か間違ったことをしていることになります…そのインターフェースをより良い方法で処理するための多くのオプションがあります。

選ばれた人はできるかもしれません…スウィッシュアーミーナイフのように、それは多くのこと（リモートデータソース、アイテムへの画像の関連付け、カスタムフィルタリング、AJAXクエリ…）を行うことができ、たった1つの完璧なツールではなくなります（従来のSELECTのより良いインターフェース）

El 10/08/2011、las 22：56、ivaynbergescribió：

@juanghurtado ：300Kのアイテムを含む複数選択ボックスがある場合、実際にはHTMLに完全に書き出すことはできません。 Chosenは、検索と選択に最適なインターフェイスを提供します。 この機能を提供するライブラリは他にもたくさんあります。つまり、[1]、[2]などです。 これらすべてのChosenの中で最もよく機能しますが、非常に大きなコレクションをサポートしていません。これは、リモートデータソースサポートが追加するものです。 また、Chosenがこれをサポートしている場合は、2つではなく1つのプラグインをスキンして最新の状態に保つ必要があります。

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

このメールに直接返信するか、GitHubで表示してください。
https://github.com/harvesthq/chosen/issues/79#issuecomment -1776643

本当にそれと議論することはできません...

jqueryオートコンプリートプラグインのように、選択したものから検索するときにリモートデータを取得したいのですが、plsは私を助けます

リモートデータをサポートするには+1。

UIは見栄えがしますが、リモートデータをサポートしていないなど、いくつかの問題があります。

これは実行可能だと思いますが、思ったほど簡単ではありません。 これはgithubであり、オープンソースなので、いくつかのコードを見てみましょう。

@juanghurtadoまた、既存の機能を肥大化させることなくこれを実行できると思います。jqueryとプロトタイプの両方で、リモートデータソースに必要なすべてのものが提供されます。

results_search（）は、キーを押している間にトリガーされるようです。ここで、chooseのデフォルトの動作をオーバーライドします。 もう少し深く掘り下げる必要がありますが、winnow_results（）を模倣して、読み込み動作を表示する方法（winnow_loading_results（）など）を追加できれば、問題なく機能するようです。

注目すべきもう1つの関数はwinnow_results_clear（）です。

難しいのは、これをChosenにスムーズに統合する方法を見つけることです。 それはオプションにあるべきですか？ それは単なるサブクラスである必要がありますか？ そして、これはコア開発者がマスタープロジェクトに入れるものですか？

実際、この問題を解決する必要があります。＃162で多くの作業が行われており、これが私たちが望むすべてのようです。

この時代にこの機能は必須であり、すぐに実装されることを本当に望んでいることを付け加えたいと思いました。 他のすべての方法で選択されたものは完璧です。 :)

リモートデータソースからのフェッチの問題はどうなりましたか？

@pfillerが会話に参加する時間だと思います。

+1これを見たい

ページが提供されるときにリモート値を一度にロードしているので、新しいデータを更新またはフェッチできない場合、少なくとも新しいオプションを選択に追加できれば、ページが更新されるまでクライアント側を維持できます。 したがって、リモートフェッチに+1するか、新しいオプションを追加する機能に+1します。 これが理にかなっていることを願っています...

jalokaリクエストの+1

私は17500レコードのテーブルを持っていますが、ページをロードすると遅くなり、最終的にクラッシュします...テーブル内の一致を検索する方法を実装できれば、それが最善だと思います。

誰かがそれを実装しました： https ：//github.com/meltingice/ajax-chosen

私はjQueryの第一人者ではなく、実際には何も知りません。 だから、物事を説明する私の無知な方法を許してください。 私は自分の問題を説明するのに適切な言葉を本当に見つけることができません。 私はその簡単な指示に従いました。クラスを追加し、スクリプトを配置して、関数を呼び出しました。 選択した入力がないページを除いて、すべてがうまく機能しました。 そして、データがAjaxの助けを借りて行くかどうかはわかりません。 私が推測できるのは、フォームがMySQLデータベースのテーブルから生成されるということだけです。 そこから入力のオプションを選択します。 少なくとも、ページを編集したときのように見えました。 したがって、ページをロードすると、select入力に「chzn-select」クラスのみが表示されます。これは、スクリプトがまったく機能しないことを意味します。 関連する問題を読んでそれはリモートデータソースのせいであると理解しましたが、それを修正する方法がわかりません。 実際、私はあなたたちがここで話していることを本当に理解していません。 上記のAjaxで選択したものを試しましたが、成功しませんでした。また、ここで説明した他の「ハック」も試しました。 誰かが簡単な言葉で説明できますか？私の場合、何かをすることは可能ですか？

私はjQuery1.4.2を使用しており、MacOSとWindowsの両方で試しました。 ここで確認できます：http： //94.125.8.168/eng/ （フライト情報と呼ばれる中央のブロックの[検索]または[時刻表]タブをクリックします）。 目的地、便名、空港を選択します。

@ffiona選択した呼び出しをjQuery対応関数でラップする必要があります。

$(document).ready(function() {
  $(".chzn-select").chosen();
});

スレッドのトピックについては、今後の質問を維持するようにしてください。 ご不明な点がございましたら、新しい号をお持ちください。

@pfillerこれは皆さんが取り組んでいる/または取り組む予定の機能ですか？ 私は他のすべてのajaxが選択したハックを試しましたが、どれも実際には機能しません。 私は本当にこれが必要です。なぜなら、ユーザーが株式記号を入力する証券取引所アプリに取り組んでいるからです。

@all選択したものからajaxオートコンプリートを取得するための私のオプションはロングショットであり、代替手段を探す必要があるかもしれません。 誰もがこの機能で選択した他の選択肢をお勧めできますか？

最近も作成しました。https：//github.com/ksykulev/chosen-ajax-addition

@ksykulevどこかにこれのライブデモがありますか？

@jaequery
例http://sykulev.com/ajaxchosen/index.htmlをすばやく一緒にハックしました

リポジトリの/ exampleの下にコードを追加しました。

@ksykulev ：あなたのバージョンはシングルセレクトで本当に素晴らしい仕事をします、ありがとう！ ところで、それは複数選択では機能しません。 時間があればこれを見てみるかもしれません。

@meltingiceのバージョンは、複数選択でも非常に奇妙なことをします。これは、選択された関数をまったく使用していないためだと思います（したがって、元のライブラリで自然に解決されるすべてのものは、入力の再配置など、ajaxバージョンにはありません。結果がクライアントに返送された後のサイズ変更）。

@jbbarth ：はい、その通りです。複数選択でテストしたことがないので、うまく機能しないと想像できます。 私のライブラリの完全性に関して、私は間違いなくこれらのサポートを追加することができます。 乗ります。 ありがとう！

選ばれたものをベースにしたルックアンドフィールで自分のバージョンをロールバックすることになりました。

https://github.com/ivaynberg/select2

ajax / jsonpリモートデータセットと無限スクロール（ページングされたリモートデータセットの遅延読み込み）をサポートします。 ただし、複数選択はまだサポートされていません。

@ivaynberg私はこれにすべての目を向けています。

Chosen（特にタグのような複数選択のサポート）で機能のパロディをヒットしたら、このスレッドを確実にバンプする必要があります。

私はChosenのルックアンドフィールが大好きですが、それは実際に実装で望まれることを残します。

とても、とてもいい仕事です！

@ivaynbergドロップダウンと検索の入力幅を具体的に計算する、chooseからのコードがまだあることに気付きました。

あなたはこれをチェックしたいかもしれません： https ：//github.com/harvesthq/chosen/pull/407

最近、ajaxで選択したバージョンを更新して、複数の選択をサポートしました。 http://sykulev.com/ajaxchosen/index.html

@ justindujardinSelect2マスターに機能パリティが追加されました。 407のサイジングについて見ていきますが、Select2のプロジェクトについてさらに議論する必要があります。

私はSelect2が大好きで、誰もがそれに切り替えることをお勧めします。 ふふ。

@ProLoser –ありがとうございます...まさに私が探していたものです。 はるかに良いオプションのように見えます。

Select2 FTW！

Select2は行く方法です！

これらすべての年後の更新はありますか？

なぜそのようなimp機能が欠けているのですか？

うーん...臭い。 テキストが強調表示されているため、Chosenを実装することにしましたが、AJAXを追加するのがそれほど難しいとは思いませんでした。 要件を満たす方法として、誰もがこれから船に飛び乗ってそこに行くのであれば、select2を使うべきだったと思います。 :(

それは素晴らしい機能です。 多くのフォークがこの機能を提案していますが、実装はしばしば混沌としています。 ：+1：

私は簡単なモンキーパッチソリューションを思いついた：

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

結果のレンダリング時に呼び出される、chooseの「source」関数オプションを提供できます。 文字列入力値とコールバック関数引数があります。 コールバック関数は提案をレンダリングします。 結果が変更されていない場合は、引数なしですぐに呼び出す必要があります。そうしないと、結果を要求して、結果を取得したときにコールバックに送信できます。 結果オブジェクトの形式は{ value: "label", value2: "label2" }です。 次に例を示します。

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

@faucctが示唆していることはうまくいくようです。 ただし、jqueryバージョンを使用している場合は、選択したスコープ外でAbstractChosenにアクセスできないため、これらのファイルを選択したスコープ内に追加するか、選択したjsファイルを変更する必要があります。 AbstractChosenとSelectParserをグローバルスコープに移動します。 もう1つの問題は、開いているリスト（選択したdivが作成）を更新しますが、実際の「選択フィールド」は更新しないため、選択に存在しない場合に選択したオプションがエラーをスローする可能性があることです。 同様に注意すべきことは、あなたが書いた文字列は、あなたが返す結果をフィルタリングするためにも使用されるということです。 また、何かを入力するたびに機能するため、電話をかけないように手動で制御できます。

私は別の拡張機能がこれであることを発見しました： https ：//github.com/meltingice/ajax-chosen

それはかなりうまく機能しますが、現在のバージョンは壊れています、あなたはいくつかのマイナーな変更を加えました。 選択したライブラリが内部のcss名を変更したため、「chzn」を「chosen」に置き換える必要があります。 最後に行う必要がある変更は、「 listz：updated 」ではなく「 chosen：updated 」をトリガーすることです。 readmeでは、cssのバグを修正するように求められますが、新しいバージョンではすでに修正されているため、修正する必要はありません。 いくつかの便利なオプションを設定することもできます。ユーザーが書き込みを続けると、システムは保留中の通話もキャンセルします。

これは私の旅でした:)、それがお役に立てば幸いです。

選択したリモートデータソースを処理するプラグインを作成することでこの問題を解決しました。皆さんが楽しんでいただければ幸いです。

selected-remote-source（https://github.com/westonganger/chosen-remote-source）

コード全体はかなり単純で、200行未満のコードです。
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

パッチを適用する必要があったChosenの唯一の部分は次のとおりです。

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH