静的自動補完への道

質問

あけましておめでとうございます。

Ajaxなどを用いずに、あらかじめ用意したArrayの中からInputTextを自動補完をすることを考えています。
たとえば、「g」といれたら「google」がでてきたり、「ごん蔵」が出てきたりするようにしたいのです。

そこで最初の難問なのですが、InputTextに文字を入れたら、そのInputTextの下に自分の用意したArrayの文字の中から5つほどdisplayで表示させたいと思います。

---------------
| と　　　　　　　　　|
---------------
トマト
トナカイ
トルストイ

これにはどのような処理を行えばよろしいのでしょうか。「displayを動的に生成(1)」し、さらに「中に文字を入れ(2)」、「指定したInputTextの下に並べて表示する(3)」という３つをクリアしないといけないのではないかと予測しているのですが、そのすべての方法がわかりません。
すべてわからなくても、わかる範囲で教えていただけると助かります。

回答No.4

babu_baboo · ベストアンサー

たいさく(?)なので、ぶんかつして いちぶだけ。
はいれつから、がいとうしそうなもじを かえします

var v = [
　['Mac Air', 'apple', 'air', 'mac note'],
　['Macintosh', 'apple', 'mac'],
　['Mac mini', 'apple', 'mac', 'mini'],
　['google', 'グーグル', 'ぐーぐる'],
　['ごん蔵', 'ごんぞう', 'gonzou']
];

(function () {
　if(!Array.prototype.map)
　　Array.prototype.map=
　　　function(b,e){
　　　　var c=this.length;
　　　　if(typeof b!="function")throw new TypeError;
　　　　for(var d=Array(c),a=0;a<c;a++)
　　　　　a in this&&(d[a]=b.call(e,this[a],a,this));return d
　　　 };

　//________

　function Referee (list) {
　　this.list = list;
　}

　function getList (key) {
　　var cb = { result: [], length: key.length, key: key, keyLow: key.toLowerCase ()} ;
　　this.list.map (wordCheck, cb);
　　return cb.result.sort (oerder).map (firstValue);
　}

　function wordCheck (list) {
　　(this.key === list[0])
　　? this.result.push ([list[0], 1])
　　: list.map (secondLatterCheck, (this.word = list[0], this));
　}

　function secondLatterCheck (word) {
　　if (0 === word.indexOf (this.keyLow))
　　　this.result.push ([this.word, this.length / word.length]);
　}

　function firstValue (ary) { return ary[0] }

　function toLowerCase (str) { return String (str).toLowerCase () }

　function oerder (a, b) { return a[0] === b[0] ? 0: b[0] - a[0] }

　function create (list) {
　　if (1 > arguments.length)
　　　return null;
　　return new Referee (list);
　}

　//____________

　Referee.prototype.getList = getList;
　Referee.create = create;

　this.Referee = Referee;
}) ()

var a = Referee.create (v);
alert (a.getList ('g'));
alert (a.getList ('ma'));

お礼

まってました！！
お礼遅くなってすいません。
ありがとうございます。
助かりました

回答No.5

babu_baboo

まちがえた！
function oerder (a, b) { return a[0] === b[0] ? 0: b[0] - a[0] }
を
function oerder (a, b) { return a[1] === b[1] ? 0: b[1] - a[1] }
に！

もう～、しんねんそうそう…。

回答No.3

神崎 渉瑠（@taloo）

配列の１つ１つの要素に対して、正規表現やindexOf()で該当の文字があるかを調べて、
その文字が含まれる要素を<li>なり<p>なりで表示してください。

以下のページの"互換性"のコードをアレンジして前方一致検索などに改変できると思います。
https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/Array/indexOf

Ajaxを使うのは、検索をサーバーに任せるというだけですから。

補足

リンクありがとうございます。参考にしたいと思います。

回答No.2

takuhito_hihara

勉強の為に作るのは良いと思いますが、ここまで高度な仕様のプログラムでしたら素直に既存のライブラリやAPIなどを使って作った方が良いと思いますよ。

「ご」を入力して「ごん蔵」ならまだ単純で簡単ですが、「g」で「ごん蔵」はかなりメンドくさいかと。
どこまで対応するかにもよりますが、その仕様ですと「g」で「が、ぎ、ぐ、げ、ご、ぎゃ、ぎゅ、ぎょ、ガ、ギ、グ、ゲ、ゴ、ギャ、ギュ、ギョ」などで始まるすべての単語に対応しなくてはならないので。googleですらもそこまで対応したのは割とここ2、3年だったと思います。

まぁ、ということを言いましたが一応質問に答えますと、

（1）のdisplayを動的に生成と言うのがよく分からないのですが、タグを動的に生成でよろしいでしょうか？それならばjQueryなどでタグを生成しぶっ込んでやれば良いと思います。
(2)も同じく、arrayの中からマッチさせて、$(element).text(マッチした文字)として(1)で生成した要素にテキストを流し込んでやります。
(3)はCSSで縦に並べてあげるって形ですね。

という感じになると思います。

補足

>displayを動的に生成と言うのがよく分からないのですが
InputTextの下に変換候補を出力したいのですが、そこにdisplayタグを使うのだろうと予測しています。

回答ありがとうございます

回答No.1

babu_baboo

HTML5 の入力補間に、datalist があるよ。
きっとそれが 道？

補足

ありがとうございます。
使うブラウザがIE7なのでおそらく使えないのと、datalistはいろいろと痒いところに手が届かないので、javascriptでの実装を考えています