jQuery、JavaScriptオートコンプリートコンセプト

これはマルチパートの概念です。しかし、私はこの作品を理解することができれば、残りは続くと確信しています。

私が持っているのは、言葉と言い回しの配列です。そして私は人が入力できるTextAreaを持っています。私がしたいことは、ユーザが入力しているものと一致するか類似しているかどうかを配列で検索できることです。私が考えることができる最も近いことは、オートコンプリート機能です。しかし、私が欲しいのは全部ではありませんが、私が望むことは、オートコンプリート機能です。しかし、最終的には、既存のオートコンプリートは、私のニーズにとってはかさばります。

ユーザーがスペースバーに当たった後、私の目指していることは、入力時に検索をトリガーすることです。今のところ私はいいです。私の問題は私の論理はここから欠陥があるということです。テキストの少年全体をスペースバーに当てて、単語やフレーズの配列に照らしてチェックすることができるようにしたい。しかし、私は方法がわからない。現在、私はsplit()が区切り文字の区切り文字であるtextarea自体に分割されていますが、今はそれが正しくないことを認識しています。私が最初に考えていたのは、それを分割して、それを他の配列と照合してみました。何かが一致すれば幸せな日でした。そして、フレーズを確認して、一致するフレーズをチェックしようとすると、

うまくいけば、これは理にかなっている。私はこれでロジックを歩き回る必要があります、私はデバッグしていないので、実際にはコードは現在ありません、私はその作品で動作するロジックを把握しようとしています。だから私は前進することができます。

1

2 答え

更新:

Check this fiddle: http://jsfiddle.net/VwNHN/

要件に合わせて調整する必要がありますが、以下のロジックをどのように実装できるかについては正当な考え方があります。


キーの押下時のロジック(おそらくスペースバーだけでなくキーも)は次のようなものです。

1) Get your current cursor position - say X Refer for example: http://demo.vishalon.net/getset.htm

2) X の左にある N 文字を取得します。すなわち、インデックス X-N から X までのテキスト全体の部分文字列を Y に格納します。 N (たとえば100)の値を修正する必要があります。 N はあなたが探している最長の語句です。

ex: if full text is "hello world i am a sentence", and cursor is at the end, and N is 10, Y would be "a sentence"

3) Split Y by space character and store each split in an array incrementally and then reverse it - lets call the array PHRASES

例: Y "これが文章" の場合 - PHRASES

[ "this is a sentence", "this is a", "this is", "this" ]

4) PHRASES の各項目を使用して、単語/フレーズの配列を確認します。最長の一致部分が先になり、短い一致する部分が最後に来ます。

2
追加された
これは私の助けを求めることができた以上のものです。ありがとうございました。それは私が働くことができる実用的な例であるだけでなく、それを見て、私はそれが間違った方向に行くように、私自身が思いつくまでに何日もかかるでしょう。
追加された 著者 chris,
論理を説明するために答えを更新しました
追加された 著者 techfoobar,
喜んで私は助けになるかもしれません。本当に興味深い質問の+1。ちなみに、私は仕事を少し楽にしたようなものに取り組んできました。
追加された 著者 techfoobar,
また、私が投稿した関連する質問(やや関連性が高い)を見てください。アイデアがあれば、 stackoverflow.com/questions/8543714/…
追加された 著者 techfoobar,

私は少なくとも2つの枝に問題を分けるだろう:

  1. ユーザーがトリガーした検索イベント。
  2. 検索機能
  3. 結果の視覚化

私が実装しようとしていることを理解していれば、あなたの配列がそれほど大きくない限り(それ以外の場合はキー入力時にハングする)、 ' onkeypress 'イベントで検索を開始します。

次に、検索機能:あなたは配列で検索する必要がありますので、要素ごとに検索します。 Jqueryは素晴らしい jQuery.each()関数を提供します。また、 _.each(リスト、イテレータ、[コンテキスト])を< a href = "http://documentcloud.github.com/underscore/#" rel = "nofollow">アンダースコアプラグイン。

結果の視覚化:表示する内容(グリッド、表など)はわかりませんが、配列のすべての要素が別のDOMオブジェクトに関連付けられている場合は、プロパティのランタイムを変更できますjqueryで

あなたがもっと必要ならば教えてください。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript