テキストのハイライトでよく使用されるjQuery highlight-3。

偶然、仕事で使うことになったので、ちょっと調べてコマネチしていた。

よく使用される分だけあって、コードの使い方が書いてあるサイトはよくあった。（最初に見つけてきた人はすごいと思う。）

・・・が、調べたサイトではいずれもサンプルのコードしか無かった。

• テキストボックス→サブミット（確定）を押す、ハイライトされる
• テキストボックス→サブミット（クリア）を押す、ハイライトが消される

実にシンプルな動作である。

だけど、実務的にこのままでは少し使用しづらい。

自分でカスタマイズできる人なら良いんだけど、このままだとちゃちゃっと組み込んで終わりにすることができない。

そこで、ある程度実用性を兼ねたコードを作成することにした。

その際に欲しかった内容としては以下。

• 検索窓をフォーカスアウトしたときにキーワードのハイライトを実行したい。
• 検索窓をフォーカスインしたときにキーワードをクリアしたい。
• 検索のキーワードを入力するテキストボックス、ハイライトの対象エリアは同じスクリプトエリア内で指定するようにして一元化したい。
• フォーカスイン中は、常にハイライトのキーワードを検知して、リアルタイムにハイライトしたい。

上記を、サイトごとでいちいちjQueryで作って書き込んでいくのは正直面倒くさい。

拙いながらもプラグイン化を図った。

ソースコード

以下を、jquery.highlight-3.ui.jsとでもして保存。

（毎度のことながらタブは全角スペースに置き換えている）

/***************************/
/* [highlight-3 UI Plugin] */
/***************************/
(function($){
　$.fn.hl3ui = function(options){
　　var opt = {
　　　target: 'body',
　　　caption: '',
　　　delay: 1000
　　};
　　var set = $.extend(opt, options);
　　var inc = $(this);
 
 
　　var hl3uiPack = (function(){
　　　var siv;
 
　　　return{
　　　　ini: function(inc){
　　　　　var str = '';
　　　　　if(set.caption != ''){
　　　　　　str = '<div class="hl3uiCaption">' + set.caption + '</div>';
　　　　　}
 
　　　　　inc.append('<div class="hl3uiInclude">'+ str +'<input type="text" class="hl3uiKeyword" /></div>');
　　　　　var obj = {
　　　　　　con: inc.find('.hl3uiInclude').find('.hl3uiKeyword'),
　　　　　　tag: $(set.target)
　　　　　};
　　　　　
　　　　　return obj;
　　　　},
　　　　act: function(tag, con){
　　　　　hl3uiPack.del(tag);
　　　　　var key = con.val();
　　　　　if(key != ''){
　　　　　　tag.highlight(key);
　　　　　}
　　　　},
　　　　del: function(tag){
　　　　　tag.removeHighlight();
　　　　},
　　　　run: function(tag, con){
　　　　　siv = setInterval(hl3uiPack.act, set.delay, tag, con);
　　　　},
　　　　rem: function(con){
　　　　　con.val('');
　　　　},
　　　　clr: function(){
　　　　　clearInterval(siv);
　　　　}
　　　};
　　})();
 
　　var obj = hl3uiPack.ini(inc);
 
　　obj['con'].focus(function(){
　　　hl3uiPack.del(obj['tag']);
　　　hl3uiPack.rem(obj['con']);
　　　hl3uiPack.run(obj['tag'], obj['con']);
　　});
　　obj['con'].blur(function(){
　　　hl3uiPack.clr();
　　　hl3uiPack.act(obj['tag'], obj['con']);
　　});
 
　　return(this);
　}
})(jQuery);
 
/*
 * setInterval for lt IE9
 *
 * Excerpt to Mozilla Developer Network 
 */
if (document.all && !window.setTimeout.isPolyfill) { var __nativeST__ = window.setTimeout; window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () { vCallback.apply(null, aArgs); } : vCallback, nDelay); }; window.setTimeout.isPolyfill = true;}if (document.all && !window.setInterval.isPolyfill) { var __nativeSI__ = window.setInterval; window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? function () { vCallback.apply(null, aArgs); } : vCallback, nDelay); }; window.setInterval.isPolyfill = true;}

71行目以降はMDNさんより拝借。

だって、setIntervalの第3引数以降がレガシーブラウザに対応していないんだもん。IE死すべし。

で、いつもどおりのタグ設定。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.highlight-3.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.highlight-3.ui.js" type="text/javascript" charset="utf-8"></script>

上に続けて以下を設定。

<script>
$(document).ready(function(){
 //↓テキストボックスを表示するDOMを指定
　$('#keyword').hl3ui({
　　target:'.targetArea', //検索の対象とするタグ, id, class（デフォルトはbody）
　　caption:'キーワードを検索', //テキストボックスのキャプション（デフォルトは無し）
　　delay:1000 //自動更新間隔（デフォルトは1000ミリ秒）
　});
});
</script>

で、テキストボックスを表示したい箇所に以下を設定。（上記の例なら#keyword）

<div id="keyword"></div>