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

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

スペルミス訂正「もしかして」表示

登録キーワードに近い入力があると「もしかして: 〇〇」という訂正候補を提示します。WordPressの検索結果0件ページでの離脱防止に有効な演出です。

jsinput

プレビュー

ソースコード

HTML

<div class="d03-15-10-search">
          <input type="text" class="d03-15-10-input" placeholder="例: せいさく" aria-label="検索">
          <div class="d03-15-10-hint"></div>
        </div>

CSS

.prev.d03-15-10{align-items:flex-start}
        .d03-15-10-search{width:100%;max-width:300px;margin:0 auto}
        .d03-15-10-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-10-input:focus{border-color:#a5b4fc}
        .d03-15-10-hint{margin-top:8px;font-size:12.5px;color:#64748b;min-height:18px}
        .d03-15-10-hint b{color:#4f46e5;cursor:pointer;text-decoration:underline}

JavaScript

(function(){
        var root=document.querySelector('.d03-15-10');if(!root)return;
        var input=root.querySelector('.d03-15-10-input');
        var hint=root.querySelector('.d03-15-10-hint');
        var known=['せいさく','こうしん','といあわせ','りょうきん'];
        var suggest={'せいさぐ':'せいさく','せいさ':'せいさく','こうしぬ':'こうしん','といあわぜ':'といあわせ'};
        input.addEventListener('input',function(){
          var q=input.value.trim();
          hint.innerHTML='';
          if(!q||known.indexOf(q)>-1)return;
          var s=suggest[q];
          if(s){
            hint.innerHTML='もしかして: <b>'+s+'</b>';
          }
        });
        hint.addEventListener('click',function(e){
          if(e.target.tagName==='B'){input.value=e.target.textContent;hint.innerHTML='';}
        });
      })();

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