jQuery highlight-3でハイライト検索

テキストのハイライトでよく使用される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>

 

これで上記のdivの中にハイライト検索窓が出力され、そこで入力したテキストが、欲しかった内容で挙げた仕様で動作する。

 

はず。

 

一応、組み込んで問題なかったので、今後も使えるようにおぼえがき。

カテゴリ

この記事のコメント

コメントはないです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です