ページ読み込み時に可変となる文字列を検知してsourceイベントを発火させる方法【jQuery UI Autocomplete】
やりたいこと
jQuery UI Autocomplete を使って、ページ読み込み時にsourceイベントを発火させます。
もう少しユーザー操作に噛み砕くと、
- ページ読み込み時に、"東京" または "北海道" をinputにセット
- inputにセットした文字列から、オートコンプリートを表示
"北海道の場合"は
- 北海道 観光
- 北海道 エリア
- 北海道 グルメ
を表示
Autocompleteの概要
ドキュメント
概要
属性.autocomplete関数の中で処理を書いていきます。
$('#input').autocomplete({ source: '候補のデータ', autoFocus: true, delay: 100, minLength: 1 });
- source : 候補のデータ
- autoFocus : リスト先頭にフォーカスするか
- delay : 入力から表示までの遅延（ミリ秒）
- minLength : イベントが発火する最初の文字数
実装例
$(() => { const paramFirst = commonParam(); $('#input').val(decodeURIComponent(paramFirst)); const keyDownEvent = new KeyboardEvent( "keydown", { keyCode: 40 }); document.getElementById("input").dispatchEvent(keyDownEvent); $("#input").autocomplete({ source: '表示するデータ（ここで通信処理を書く）' }); }) const commonParam = () => { let paramList = {} const originParam = location.search .substring(1) .split('&') for(let i = 0;originParam[i];i++) { paramSplit = originParam[i].split('=') paramList[paramSplit[0]] = paramSplit[1] } return paramList["area"]; }
- リクエストパラメータから値を取得してテキストボックスに反映
- KeyboardEvent を使って、keyDownEvent(code 40)を実行
- autocomplete処理が呼ばれて、オートコンプリートが表示
テキストボックスと検索候補以外の要素をクリックしたときのイベントを一行ずつ解説【JavaScript・jQuery】
こういうやつですね
利用例としては、
- テキストボックスにフォーカスが当たって履歴の候補を表示
- テキストボックスの入力を始めると検索候補が表示
今回はテキストボックスと候補以外をクリックしたとき、候補を非表示にしたいと思います。
キーは
Element.closest()
です。developer.mozilla.org
// テキストボックス <input type="text" class="search-box" value="" autocomplete="off" placeholder="検索ボックス"> // 候補 <ul class="candidate"> <li>hoge</li> <li>huga</li> <li>foo</li> </ul>
.none { display: none; }
$(document).on('click',(e) { if(!$(e.target).closest('.search-box,.candidate').length) { $(".candidate").addClass("none"); } });
JSの処理を順番に解説します
- e.target : クリックした要素の
- e.target.closest('.search-box .candidate') : 親要素までにテキストボックスまたは候補が
- !$(e.target).closest('.search-box .candidate').length : なかったら(0だったら)
- $(".candidate").addClass("none") : 候補を非表示にする
以上です
JavaScriptでパラメータの値を取得する方法を一行ずつ解説
JavaScriptでパラメータを取得する方法
まず完成系はこちらです。一つずつ解説していきます。
let paramList = {} let paramSplit = {} const originParam = location.search .substring(1) .split('&') for(let i = 0;originParam[i];i++) { paramSplit = originParam[i].split('=') paramList[paramSplit[0]] = paramSplit[1] }
- paramList
- paramSplit
- location.search
- .substring(1).split('&')
- originParam[i].split('=')
- paramList[paramSplit[0]] = paramSplit[1]
パラメータを入れておくリストです
パラメータとその値を一時的に分けておくリストです
パラメータを丸ごと取得します
URL : https://hogehogefoo.com?userid=0001234&fooName=foo location.search // ?userid=0001234&fooName=foo
searchだけでなくlocationオブジェクトはパスを取得する pathname、動的に画面遷移を行う href など様々な種類があります。
1文字目以降(?)を&ごとに区切ってリストに挿入します。
location.search // ?userid=0001234&fooName=foo .substring(1).split('&') // userid=0001234,fooName=foo
一つのパラメータを=で区切って、paramSplitに代入します
// userid=0001234 paramSplit[0] //userid paramSplit[1] //0001234
パラメータと値をリストに紐付けることができます。
paramList.userid //0001234
値にアクセスすることができます
最後に
パラメータ取得についての解説記事は多数ありますが、大雑把な説明がほとんどのため、今回は一つずつ解説を入れてみました。
form操作でエンターキーを押した時のイベント取得【jQuery・JavaScript】
はじめに
今回は、form操作時のエンターキーを押した時のイベントの取り方です。
formを使う時って最後に、「検索」を押させることが多いと思います。
遷移時の操作についてタグを用いての方法は2つ
- aタグ
- buttonタグ
記述が少なく済むので、今回はbuttonタグを使用しましょう
「検索」をbuttonタグのsubmitにしてしまえば、PC、スマホ関係なくエンターキーを押せば飛ばすことができます。
developer.mozilla.orgというわけで、エンターキーを押してテキストボックスが空の時にはalertを出して遷移させないようにしたいと思います。
$('.form').on('submit', () => { const keyword = $('.form-box').val().trim(); if(keyword === "") { return alert("空欄だよ！"); } return true; });
※ .trim()は空白スペースがあった場合、削除してくれます
IT業界に関係する逆求人サービスを比較してみた
前回は、就職活動について時系列順にだらだらと記事を書きました。
今回は、逆求人サービスについて比較をしていこうと思います。
サポーターズ
説明会参加で支援金
他の逆求人サービスは、イベントで交通費が出ることはあるが、説明会で支給されるのは珍しい、というかそこがサポーターズ最大の特徴
イベント「ギークフェスタ」
- 6月はインターン選考、12月は本選考向けの、IT企業合同説明会
- AWS・IBM・楽天・ヤフー・サイバーエージェントなど知名度の高い大手企業からベンチャー企業まで幅広い企業が参加
- 地方からの参加者には1万円が支給
- 最後に懇親会が開かれるので、気になった企業に話しかけに行くチャンス有り
1on1逆求人面談
- 交通費が上限3万円まで支給
- ヤフーやサイバーエージェントなど大手の参加も多い
その他
- 交流会、勉強会、講演会などイベントが多数
キャリアセレクト
メンター制度
- メンターが1人つく
- 最初にSkype面談を行い、志望業界のヒアリングや今の自分に対するフィードバックをもらえる
- マイページの自己PRやESの添削
- 企業の紹介を受け、希望すればSkype面談までセッティングしてくれる
- メッセンジャーでやり取りを行うため、気になったこと事がすぐに聞ける
Web選考会
- 参加企業は8社ほど
- マイページのプロフィールで選考を行う
- エントリーは自由 既にプロフィールが登録してあれば特にすることはない
- 通過すればメールで面接や面談の案内が来る
- 通過すれば選考免除をもらえることが多い
逆求人イベント
ジースタイラス
https://www.studenthunting.com/
IT業界に加えて通信（ドコモ、ソフトバンク）・コンサル系も参加
逆求人イベント
- 交通費は上限25000円だが地域ごとに支給額一定
- 当日現金支給で領収書の提出不要
- 面談がドラフト制となるため全ターム埋まらない場合もある
- 企業ごとにその日のナンバー1を選ぶ 選ばれた人は通知
- 上記2社に比べベンチャーは少ない印象
- 参加決定後に来る企業が分かる
その他
- 上級者用のプレミア逆求人
- 建築業界や総合職を対象とした逆求人
- イベントの地方開催
逆求人を利用して良かった点
選考免除をもらえることがある
ESや1次面接を免除してもらえた企業が何社かありました。
選考免除はもらえなくても、説明会に参加せず選考に進めた点も大きかったです。
自己分析・面接練習が進む
逆求人サイトのプロフィールや自己紹介スライドを作っている段階から、自己分析を行うことができます。
メンターさんや企業との面談を行うことで、自分をアピールする練習にもなります。
フィードバックももらえるので、次に向けて改善できます。
交通費の支援
結局、これが一番大きいかもしれません。
高速バスに乗らず、新幹線を使って快適に就活を行うことができました。
今回は3社のサービスを比較してみました。
改めて特徴を一つずつ挙げるとしたら
かなと思います。
3月就活解禁と言いつつ、逆求人に出てくる企業は11月頃から採用を始めています。
サービスを利用することで、ESの練習や自己分析をより深めることができます。
IT業界の中でも、WEBサービスやアプリ、ゲーム業界へ進みたいと思っている人はぜひ利用してみてください。
