JSファイルに違うJSファイルの定義を付け加えたい。

Question

JSファイルについて質問がございます。
下記リンク先のJSファイルはJSON形式をテーブルにするといった便利なものです。
リンク内容

使用すると検索ボックスができるんですがその検索ボックスに自前で用意したサジェスト機能を付け加えたいのですが、それってできるんでしょうか？

サジェスト機能

$(document).ready( function() {
$("#ac2").autocomplete({
	source: function(req, resp){
		$.ajax({
		    url: "http://127.0.0.1:8180/api/stock/keyword",
		    type: "GET",
		    cache: false,
		    dataType: "json",
		    data: {
		    car_name : req.term
		    },
		    success: function(o){
		    	resp(o);
		    },
		    error: function(xhr, ts, err){
		    	resp(['']);
		    }
		  });

	}
});
});

<form method="get"action="xxx" >
<input type="text"  id="ac2"  name="car_name" >
<input type="seach" value="検索"></form>

リンク先のJSのテキストボックスに id="ac2"を付け加えればいいと初心者的なことしましたができませんでした。
宜しくお願いします。

Answer 1

ソースコードに直リンクではなく公式サイトなどを貼ったほうが良いかと。

かる～く調べたところ、入力要素を参照する公式な方法はないようです。

$('#foo').columns({ 
  data: [{a: "a", b: "b"}],
  searching: false
}).$el.find(".ui-table-search")

ただ、このようにcolumns()メソッドの戻り値に.$el.find(".ui-table-search")と続けることで$("#ac2")に当たると思われる入力要素が取得できました。
非公式なので動作保証できませんが。

ちなみにsearching: falseにしておかないと、ご質問コード中の ajax を使った検索処理ではなく、Columns 独自の検索処理が動くらしいので邪魔になると思います。
(リクエストによる検索ではなく、ただのテーブル内のフィルタリング処理なので)

検索するたびにテーブルの中身を変えるなら、
Example 5: Destroying an old table and creating a new table
の項も参考にしてください。

Comments

[takato]

tozip様

いつもありがとうございます。
リンク先これからそうしていきます。ご指摘ありがとうございます。
jquery.columns.min.jsに記述していただいたJS文を書きかえればよろしいでしょうか？
もしくは新たにJSファイルを作成するということなのでしょうか？
おそらく前者かと思いますが変更する個所はどのあたりになるでしょうか？

＞検索するたびにテーブルの中身を変えるなら、
早速確認してみます。ありがとうございます。

[tozjp]

いえ、後者です。
プラグインを読み込んだあとに上のコードが実行されるようにすればOKです。
searching: false と指定することで自動検索を OFF にする機能も、 jquery.columns が利用者に提供している公式な機能の一つです。

ただ、入力要素を取得する方法は提供されていないので、どうしても取得したいなら上の強引で非公式な方法でできなくもないという紹介でした。

[takato]

tozip様
本当にいつもすいません。
詳しいですね。。。公式サイト見ても英語のため翻訳かけても少しおかしく表示されるんですよね。
今ちょっと試すことは出来ないですが、できるようになったらすぐに試してみます。
本当にいつもありがとうございます。

[tozjp]

もはや雑談ですが、詳しくはないですよ。
調べ方を知っているだけです。

「net::ERR_FILE_NOT_FOUND」というエラーを書き込んでいるので Chrome を使っていると仮定しますが、例えば今、 [Ctrl]+[Shift]+[J] を押してください。
ブラウザコンソールが開きます。使ったことはありますか？
コンソール (Console) じゃないところが開いていたら Console を探してクリックしてください。

そこに以下のように入力してください。

var foo = Object.create(null); foo.bar = "hello"; foo.hoge = new Date();

そして [Enter] 。これで、このウィンドウでこの JavaScript が実行され、変数 foo が定義されました。

続いて、今度は次を入力してください。

foo.

入力補完として先ほど定義した bar と hoge が表示されます。
更に、後ろに hoge. と続けてください。
hoge つまり new Date() に含まれるメンバーが表示されます。

このようなツールを使って jquery.columns の中からそれらしい名前のメンバーを探して紹介しただけです。
公式・非公式と言っているのは、探しだしたメンバーの名前が公式サイトで紹介されているかどうかを検索しただけです。
英語なんてほとんど読んでいません。
海外のテック系サイトを読むときは各章の見出し、サンプルソース、たまに注釈だけ読めばほぼ大丈夫です (笑)

[takato]

tozip様
上記のJSファイル作成したところ「Cannot read property '$el' of undefined」とエラーがでました。
フィルター機能は外せたと思います。
あと一歩なのに煩わしいです。

[takato]

tozip様

ブラウザコンソールは使用してます！F12でも開きますよね！
>var foo = Object.create(null); foo.bar = "hello"; foo.hoge = new Date();
これは知らかなかったです。なぜか時刻が出ました。
教えていただいたのですが便利さがわかるまで経験が必要だと感じました。
これでよくわかりますね！
わけがわからずjquery.columns.min.jsの中身をずっと見てました笑

[tozjp]

> 「Cannot read property '$el' of undefined」
ちょっと試してみたところ、先頭の ID が間違っているなど、存在しない要素に対する「.columns」を実行すると undefined が返されました。
$("-")の部分を見なおしてください。

以下余談です。
一般にブラウザのコンソールは最後に評価された式の評価結果を出力します。
var foo = Object.create(null); foo.bar = "hello"; foo.hoge = new Date();
は、3つの式を評価しているので、最後の foo.hoge = new Date() の結果が返されます。
foo.hoge = new Date() の評価結果とは何か…。
代入式の評価結果は、式の右辺と同じです。つまり代入された値がそのまま返されます。
最後に評価された式「foo.hoge = new Date();」が日付を代入する式であったため、代入された日付が表示されたのですね。

[takato]

tozpi様
見直す箇所はtozp様が張っていただいたJSの「$('#foo')」を変更するといったことですよね？jquery.columns.min.jsの中には$('-')にあたる関数がなかったもので・・・

余談の返答ですが何故時刻が出たのかがはっきりわかりました。ありがとうございます。
最終的な値を調べることができるというわけですね。

[tozjp]

jquery.columns.min.js の中身については忘れてください。
そうです。利用する側の $('#foo') です。

混乱があるようなので、前提をはっきりさせておこうと思います。
こと僕がアドバイスする限りにおいて、(他の方もそうだと思いますが) 外部から入手した既存のライブラリのソースコードに直接手を加えることを勧めることはありません。
１、どうしても手を加えなければ解決せず
２、他にいいライブラリもなく
３、自分で実装するのは現実的ではない
といった場合のみ、「ライブラリを編集するしか手はないようです」とはっきり明言したうえで外部ソースの編集を勧めます。

理由を上げるとこんな感じです：
- Google で簡単に見つかるような知名度なら、編集しないと使いものにならないものはそうない。
- 編集する外部ソースの設計を把握していないと不具合を生むなど難易度高め。それに把握できるなら自分で作ればいい。
- そもそもライブラリ作者の方針によっては利用規約違反となる可能性がある。
- 編集されたライブラリを使ったプログラムを他の人が直すときに混乱する。

最後のは、編集したライブラリを正式に別の派生ライブラリとして独立させる場合もあるので、
微妙なところですが…。(もちろんライセンスによっては禁止です)

[takato]

tozip様

ご親切にわかりやすく書いていただいてありがとうございます。思わず熟読してしまいました。
ちょっと自分がイメージしているのとなかなかかみ合うことがなかったのですごい納得しました。
確かにそうですよね。自分で難しく考えてしまったようです。
案外そういったことはサイトに書いていないのでとても勉強になりました。
ありがとうございます。

Answer 2

リンク先jsを使用した結果の一覧のなかにあるテキストボックスに対して、autocomplete を初期化してあげれば良さげな感じです。リンク先のjson を一覧にするメソッドには、プロパティがあって、描画完了時に呼び出すことができる仕組みがあるはず。jquery のプラグインツールは、大抵描画前、描画中、描画直後に任意の処理を呼び出すことができるようになっています。それを見つけて、コールバックメソッドとして実装してあげれば良いです。
リンク先は圧縮コードになっていますね。圧縮されてないコードがあるはずなので出来ればそちらを使った方が良いです。動作確認取れたら圧縮コードにいれかえます。

Comments

[takato]

ipadcaron様
初めまして。コメントありがとうございます。
結局jquery.columns.min.jsの中身をいじるしかないですよね。
プラグインツールの中身をいじるのは初なのでまず指摘された圧縮されていないファイルを探してみます。
＞動作確認取れたら圧縮コードにいれかえます。

この辺りはまだわからないです。申し訳ございません。