2

アプリケーションに大きなテキストボックスがあり、次のように複数の行にテキストを入力する可能性をユーザーに提供します:

最初のテキスト

2 番目のテキスト

等々...

各行は、意味を持つ個別のデータです。問題は、ユーザーが行に @ などの特定の文字を入力した後に ajax オートコンプリート エクステンダー機能を使用し、ユーザーが @ の後に入力した最初の文字に従ってデータベース内のレコードをフィルター処理したいということです。完全な提案リストが表示されます。たとえば、テキストの 3 番目の部分 @Action1 は、ユーザーが A を入力した後、選択する値のリストを求めるプロンプトが表示されることを意味します。

私にはいくつかの懸念事項があります: 1 つ目は、オートコンプリート エクステンダーをテキスト ボックス内のテキストの一部に対してのみ使用することは可能であり、2 つ目は、複数の行に対してこのように機能しますか (つまり、各行の動作で 1 回) ですか? その位置に関しては、@ 記号の下に表示されることを望んでいたにもかかわらず、それが参照するテキストボックスの下部以外に選択肢はないと思います。

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

更新: ここで探しているものに似たものを見つけました: Twitter スタイルの autocomplete in textareaですが、著者は自分の解決策を簡単に説明しただけです。どんな助けでも大歓迎です、thx!

4

2 に答える 2

0

各行は、意味を持つ個別のデータです。

<input>複数のフィールドではなく、なぜテキストエリアを使用しているのですか?

UIデザインのエラーはすでにそこにあるように聞こえるので、私の答えの残りの部分はかなり理論的です。あなたの問題に対する賢明な修正は上記のものであるため、おそらくこれ以上詳しくは説明しません。

まず、テキスト ボックス内のテキストの一部に対してのみオートコンプリート エクステンダーを使用できます。

なぜそうすべきではないのですか？たとえば、テキストエリア内のカーソル位置は読み取り可能です (ただし、クロスブラウザーの問題に対処する必要があります)。

次に、複数の行に対してこのように機能しますか（つまり、各行の動作で1回）？

改行が「難しい」改行である限り (Enter/Return を使用してユーザー自身が作成)、実際のテキストエリアの内容を分割し"\n"て各行を単一の値にすることは問題ありません。

その位置に関しては、@ 記号の下に表示したかったのですが、それが参照するテキストボックスの下部以外に選択肢はないと思います。

等幅フォントを使用している場合は、@ の位置を行番号と列番号で大まかに測定し、それを文字幅と行高に一致させることができます。他のフォントの場合、@ 文字の前の前のテキストの実際の幅を測定するには、さらに「マジック」が必要になる場合があります。

于 2012-08-28T12:44:31.450 に答える
0

このためのMeteorパッケージを作成しました。これにより、フリー テキストと複数のオートコンプリート ソースの両方が可能になります。Meteor のデータ モデルにより、カスタム レンダリング リストを使用した複数ルールの高速検索が可能になります。Web アプリに Meteor を使用していない場合 (私は信じています)、残念ながら、オートコンプリートに関してこれほど素晴らしいものは見つかりません。

https://github.com/mizzao/meteor-autocomplete

どのように機能するかの写真については、リンクを参照してください。フォーク、プル、改善！

于 2013-09-22T22:03:31.323 に答える