手取り16万円の貧乏プログラマーの僕が、7日間で月収60万円になった方法

価値ナシ貧乏プログラマーの僕が、
フリーランスプログラマーになったら月収が3倍になりました。

詳しくはこちら

【jQuery UI】Webサイトのテキストボックスに、オートコンプリート(入力候補)機能をつける方法

プログラミング

どうも、コウイチです。

今回は、jQuery UI を使ったお勉強です。

ちょっと仕事で、Webサイトのテキストボックスにオートコンプリート機能をつけたくなったので、

調べたついでに簡単なサンプルを書いてみました。

オートコンプリートとは?

オートコンプリートって何ぞや?

簡単なサンプルを用意しました。

こんなやつです↓

Webサイトのテキストボックスに何か文字を入力したときに、その候補となる文字が表示されるあれです。

Googleで検索するときも同じような候補が現れますよね?

 

今回は、jQuery UI を使用して、これを簡単に実現してみます。

jqueryjquery UI は、事前にダウンロードして、使えるようにしておいてくださいm(_ _)m)

ソースコード

それでは実際のソースコードを見ていきましょう。

用意するファイルは、

  • index.html
  • script.js

の2つです。

index.html

テキストボックスがあるだけの、シンプルなページです。

テキストボックスには、id属性で autocomplete という名前を付けました。

jquery と jquery UI関連のファイルリンクは、ご自身の環境に合わせて変更してくださいね。

script.js

jqueryスクリプトがこちらです。

まず、オートコンプリートの候補となる文字列を、配列で用意します。

次に、テキストボックス(id:autocomplete)に対して、autocompleteメソッドを実行します。

その際のsource設定にその配列をセットするだけです。

autocompleteメソッドのオプション

ここで、autocompleteメソッドのオプションの説明です。主に、以下のようなオプションがあります。

オプション 概要 初期値
source 候補リストの配列を指定します。(必須) なし
autoFocus trueを指定すると、候補リストが出現したときに最初の項目を自動で選択します。 false
minLength 最低何文字打ったら候補を検索するか。
例えば「あ」とだけ打っても大量の文章がヒットしてしまうようなときは、この設定値を2とかにすると「あい」と打って初めて検索処理が走る。
ユーザーの使いやすさ的にも、この設定値を上げた方が良い場合がある。
1

普通に使う分には、これらの設定値を押さえておけば良いかと思います。

他にも、検索候補メニューを表示する位置を変えたり、こだわりたい場合は色々できるので、

日本語リファレンスを見ると詳しく載ってます ⇒ jQuery UI 日本語リファレンス Autocomplete

実行結果

実行結果です。先ほどお見せしたのと同じですが、

テキストボックスに何か入力すると、入力した文字列が含まれている候補文字列が、下に出てきます。

まとめ

jQuery UIを使うとこんなに簡単に、オートコンプリート機能が実現できてしまいました。

応用すると、データベース上の候補文字列を表示することもできますので、興味があれば調べてみてください。

それでは、ありがとうございました。

スキルに自信がない20代でも、フリーランスになって月50万以上を稼げます。

最後に僕の実体験から、プログラマーが最も簡単に収入を上げる方法をお伝えします。

それは、フリーランスになることです。

 

エンジニアだったら誰でもフリーランスになれます。

業務経験が1年もあれば、月収50万が狙えます。

 

信じられないかもしれませんが、

フリーランスというのは稼げる働き方なのです。

 

僕は正社員でプログラマーをしていたのですが、

・終電帰りが当たり前
・上司に毎日怒鳴られる。
・手取り16万

という地獄のような環境が耐えられなくなり、

フリーランスになったら月収がいきなり60万になりました。

 

正直僕なんか、大したスキルはありません。

いつも下っ端の下請けプログラマーでした。

 

なのに収入は3倍になりました。

自信と健康とお金を手に入れることができました。

 

いつまでたっても上がらない正社員の給料にイライラしている方は、

是非フリーランスにチャレンジしてください。

 

プログラマーが最速で月収を上げる方法です。

 

・フリーランスなんて不安定じゃん。仕事見つからなかったらどうするの?

・仕事探しがだるい。

・転職活動なんかする暇ないんだよ

・俺のスキルじゃ無理なんだよ

 

僕もそう思ってビビってました。

ですが、思った以上に簡単でした。

 

思い込みというのは本当に恐ろしいです。

やれば行ける世界です。

 

そんな僕がフリーランスになって、

3年間働いても上がらなかった給料を、

一瞬で3倍に上げた方法を、以下の記事で書いています。


【月収20万円⇒月収60万円】価値ナシ貧乏プログラマーの僕が、7日間で収入が3倍になった物語

プログラミング
衣食住よりプログラミング

コメント