質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

274閲覧

SemanticUIのsearchでattributesを取得したい

yokatone

総合スコア43

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/02/27 05:04

編集2022/01/12 10:55

#前提・実現したいこと

現在SemanticUIのsearch機能を実装しようとしております。
このとき、結果の出力フォーマットと受け取るjson構造は同じだがデータ内容が異なるAPIが複数あって、
inputboxに応じてurlを変更したいと考えています。
しかしながらJavascriptがよく分からなくて、関数内でのinputobox = thisの受け取り方が分かりません。
inputboxの情報さえ受け取ればあとは
これができないと$('.ui.search')の部分だけ$('#hoge')に変わっているだけの同じ処理が
inputboxの数だけ増えてしまう事になってしまいます。。

ひとまずはurlだけ変わればよいですが、できれば柔軟な開発ができるよう
attributesを取得して、それによって処理を変えるところまで行きたいです。
方法についてご存知の方がおられたらぜひ教えてください。

#実現したいソースコード

searchのExample - Using API Settingsから抜粋のち変更

$('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { onResponse: function(githubResponse) { var response = { results : {} } ; // translate GitHub API response to work with search $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // create new language category if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // add result to category response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; }, // ここから。へたくそなコードですが、雰囲気だけでも伝われば幸いです。。 var inputbox = this; var attributes = $(inputbox).attr('url'); url: attributes; // ここまで } }) ;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

どういうHTMLがあって、それをどうしたいのか(どういうイベント時に動かすかとか)がコードからわかりませんでした。あと、「inputbox」という要素はHTMLにはありませんが、そういったものが存在する環境なのでしょうか。

HTML

1<input id="test" type="text" value="test!">

js

1function my_search( target ){ 2 $( '.ui.search' ).search( { 3 url: target 4 /* 略 */ 5 } ); 6} 7my_search( $( '#test' ).val() );

追記:

そういうUIフレームワークなのですか。じゃあ。

HTML

1<div class="ui fluid category search" data-url="http://example.com"> 2 <div class="ui icon input"><input class="prompt" type="text" placeholder="Search animals..."><i class="search icon"></i></div> 3 <div class="results"></div> 4</div>

js

1$( '.ui.search' ).each( function() { 2 var $_t = $( this ); 3 $_t.search( { 4 url: $_t.attr( 'data-url' ) 5 /* 略 */ 6 } ); 7} );

投稿2018/02/27 18:53

編集2018/02/28 06:26
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yokatone

2018/02/28 04:06

Examplesの引用になりますが ``` <div class="ui fluid category search"> <div class="ui icon input"> <input class="prompt" type="text" placeholder="Search animals..."> <i class="search icon"></i> </div> <div class="results"></div> </div> ``` といったコードで、`class="prompt"`のinputタグをinputboxとしています。 SemanticUIの標準機能でsearch機能のminCharactersに設定された文字数以上がここに入力されるとurlに対するajaxのデータ取得が発生し、これの戻り値がonResponseのコールバックになるようです。 それで、このajaxのデータ取得先(url)をinputのidなどで区別して可変にしたい....といった感じです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問