← 動的パーツギャラリーへ戻る

パーツ番号 03-15-02 ・ JavaScript使用

一致部分ハイライト候補

入力した文字列と一致する部分だけ候補内で太字・色付きハイライトされます。WordPressの記事検索やFAQ検索で該当箇所を視覚的に伝えるのに有効です。

jsinput

プレビュー

ソースコード

HTML

<div class="d03-15-02-search">
          <input type="text" class="d03-15-02-input" placeholder="例: せい と入力" aria-label="検索">
          <ul class="d03-15-02-list"></ul>
        </div>

CSS

.prev.d03-15-02{align-items:flex-start}
        .d03-15-02-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-02-input{width:100%;box-sizing:border-box;padding:10px 13px;border:1.5px solid #e5e7eb;border-radius:11px;font-size:13.5px;color:#1f2937;outline:none}
        .d03-15-02-input:focus{border-color:#a5b4fc}
        .d03-15-02-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
        .d03-15-02-list li{padding:8px 11px;background:#f8fafc;border:1px solid #eef2f7;border-radius:8px;font-size:13px;color:#374151}
        .d03-15-02-list mark{background:#fde68a;color:#92400e;border-radius:3px;padding:0 1px}

JavaScript

(function(){
        var root=document.querySelector('.d03-15-02');if(!root)return;
        var input=root.querySelector('.d03-15-02-input');
        var list=root.querySelector('.d03-15-02-list');
        var data=['制作実績一覧','制作費用の目安','制作フローについて','清算・お支払い方法'];
        function esc(s){return s.replace(/[.*+?^${}()|[\]\\]/g,'\\$&');}
        input.addEventListener('input',function(){
          var q=input.value.trim();
          list.innerHTML='';
          if(!q)return;
          var re=new RegExp('('+esc(q)+')','g');
          data.filter(function(d){return d.indexOf(q)>-1;}).forEach(function(h){
            var li=document.createElement('li');
            li.innerHTML=h.replace(re,'<mark>$1</mark>');
            list.appendChild(li);
          });
        });
      })();

クラス名 .d03-15-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。