
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
jQuery
2018.06.20
jQuery UI の autocomplete を利用すると、入力候補リストを表示して入力を補助する オートコンプリート機能 を実装することができます。
今回は、autocomplete の使用方法について紹介します。
1.autocomplete を使用してテキストボックスを作成
2.autocomplete のオプション
3.autocomplete を使用してコンボボックスを作成
jQuery UI の autocomplete を使用して テキストボックスを作成します。
星座名の中の一文字をひらがなで入力してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> <!-- $(function(){ var seiza = [ "おひつじ座", "おうし座", "ふたご座", "かに座", "しし座", "おとめ座", "てんびん座", "さそり座", "いて座", "やぎ座", "みずがめ座", "うお座" ]; $("#wkText").autocomplete({ source:seiza }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> 星座名の中の一文字をひらがなで入力して下さい! <input id="wkText"> </div>
input 要素を指定して autocomplete を呼び出し、autocomplete の source オプションにオートコンプリートとして表示する文字列のリストを設定します。
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
上のサンプルで オプション「 source 」を設定していますが、autocomplete には、以下のようなオプションがあります。
appendTo | リストメニューの要素をどの要素内に挿入するかを指定 スクロールした際にポップアップメニュー位置が固定されてしまうため、オートコンプリートが「position:fixed」の要素内にある場合はこれを上書きする 初期値:”body” |
---|---|
autoFocus | メニューが開いた際に最初の項目を選択状態にするかどうかを指定 初期値:false |
collapsible | すべてのパネルが折りたためるようにするか否かを指定 「true」を指定すると、アクティブなパネルを折りたためるようになる 初期値:false |
delay | キーストロークされてから リストメニューの検索が実行されるまでの遅延時間をミリ秒単位で指定 リモートデータを取り扱う場合は サーバへの負荷を考慮する必要がある 初期値:300 |
event | アコーディオンの見出しが反応してパネルを展開する際のイベントを指定 イベント名を半角スペース区切りで複数指定することができる 初期値:”click” |
disabled | オートコンプリート機能を無効化するか否かを指定 初期値:false |
minLength | リストメニューの検索が実行されるのに必要な入力文字列の最小値を指定 初期値:1 |
position | input 要素に対するリストメニューの位置を指定 初期値:{my:”left top”, at:”left bottom”, collision:”none” } |
source | 使用するデータを指定(必ず記述が必要なオプション) リストメニューのラベルは全てテキストとして扱われる 初期値:無し(入力必須) |
jQuery UI の autocomplete を使用して コンボボックスを作成することもできます。
星座名の中の一文字をひらがなで入力してみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> <!-- $(function() { $("#wkCombo").combobox(); $("#toggle").click(function() { $("#wkCombo").toggle(); }); }); (function($) { $.widget("custom.combobox", { _create: function() { this.wrapper = $("<span>") .addClass("custom-combobox") .insertAfter(this.element); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children(":selected"), value = selected.val() ? selected.text() : ""; this.input = $("<input>") .appendTo(this.wrapper) .val(value) .attr("title", "") .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minLength: 0, source: $.proxy(this, "_source") }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on(this.input, { autocompleteselect: function(event, ui) { ui.item.option.selected = true; this._trigger("select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $("<a>") .attr("tabIndex", -1) .attr("title", "Show All Items") .tooltip() .appendTo(this.wrapper) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("custom-combobox-toggle ui-corner-right") .mousedown(function() { wasOpen = input.autocomplete("widget").is(":visible"); }) .click(function() { input.focus(); // 候補一覧表示時は非表示 if (wasOpen) { return; } // リストを全て表示(入力値は空欄) input.autocomplete("search", ""); }); }, _source: function(request, response) { var matcher = new RegExp("[" + $.ui.autocomplete.escapeRegex(request.term) + "]", "i"); //部分一致 response(this.element.children("option").map(function() { var text = $(this).text(); var value = $(this).val(); if (this.value && (!request.term || matcher.test(value))) //マッチ return { label: text, //候補表示名 value: value, option: this }; })); }, _removeIfInvalid: function(event, ui) { // 未選択時はreturn if (ui.item) { return; } // 候補を検索 var value = this.input.val(), valid = false; // 結果をreturn if (valid) { return; } }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })(jQuery); //--> </script> <div style="background-color:#CCC; padding:20px;"> <div class="ui-widget"> 星座を選択して下さい <select name="name" id="wkCombo"> <option value="" selected>選択してください</option> <option value="おひつじ座">おひつじ座</option> <option value="おうし座">おうし座</option> <option value="ふたご座">ふたご座</option> <option value="かに座">かに座</option> <option value="しし座">しし座</option> <option value="おとめ座">おとめ座</option> <option value="てんびん座">てんびん座</option> <option value="さそり座">さそり座</option> <option value="いて座">いて座</option> <option value="やぎ座">やぎ座</option> <option value="みずがめ座">みずがめ座</option> <option value="うお座">うお座</option> </select> </div> </div>
JavaScript のコードが長くなりますが、「 _source: function(request, response) 」内で選択候補の値を選別しています。
色々と加工して試してみて下さい。
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.