2017-11-13 9 views
0

私はasp.netサイトで作業していて、SharePointキーワードフィールドやStack Exchangeのタグフィールドのように、タイプを選択すると、その値がテキストボックスに入力されます。このフィールドは何と呼びますか?このフィールド型とは何を呼び出すべきかわからないため、解決策を見つけるのが難しいです。既にこれを扱うライブラリがありますか、あるいはこれがどのように行われているかの例がありますか?私がする必要がなければ、私は車輪を再発明したくありません。Asp.net:キーワードフィールドを作成する

私は最初からこれを構築するために持っていた場合、私はそれがこのように行くだろうと思います:

  1. はdivの内側にテキストボックスを持っています。 divには、テキストボックスのように見えるようにいくつかのCSSスタイリングがあります。選択されたアイテムはspan要素の内側のテキストボックスの前にプッシュされ、テキストボックスは要素が追加されると縮小します。
  2. 選択内容をキャプチャするための隠しテキストボックスがあります。これは、選択した値をサーバーに送信するために必要です。
  3. は、マウスにオーバー
  4. は何を登録するonclickイベントをお持ちの選択肢を強調するために、いくつかのCSSスタイリングで結果を表示するためのdivドロップダウンを使用して、テキストボックス
  5. の内容を使用してクエリを実行のonchangeイベントを持っていますドロップダウンから選択したユーザー
  6. divの先頭にこの値を書き込み、CSSスタイル用のスパンで囲みます。また、この値をセミカンマ区切りリストの隠しテキストボックスに書き込みます。
  7. あなたはそれが動作する選択をクリアすると隠しテキストボックス

からそれを削除するにはX用のonclickイベントを持っていると思いますか?

ありがとうございました。

答えて

0

あなたのソリューションは実行可能に見えますが、一般的に、あなたの要件に合致する多くの無料のオープンソースソリューションがあります。 「jqueryの複数選択プラグイン」を検索します。https://plugins.jquery.com/tag/multiselect/

「選ばれた」プラグイン(複数選択モード)だけで正常に見える: https://harvesthq.github.io/chosen/

私は、これらのプラグインのいずれかを選択し、必要なCSSスタイルを適用し、それで行くことをお勧め。

+0

パーフェクト。 Chosenのプラグインは、私が必要とするものであるようです。私はそれを撃つだろう。 –

+0

素晴らしい!あなたの問題を解決するなら、この答えを有用とマークすることを忘れないでください。ありがとう、幸運! –

+0

回答を受け入れたとマークしましたが、役に立つと思われる点などがありません。選ばれたのは超滑らかなbtwです。セットアップは簡単です。 –

0

もう1つのオプションはselectize.jsです。カスタムアイテムとオプションのレンダリング、およびアイテムの作成をオンザフライで行えます。 Chosenを使用してオンザフライでアイテムを作成する機能は表示されませんでした(あらかじめ定義されたオプションのみを選択してください)。 https://selectize.github.io/selectize.js/ ドラッグアンドドロップの並べ替え、xを追加してタグを削除するなどのプラグインが可能です。

関連する問題