오랜만에 책갈피

딱한 사정

저희 회사에 슈퍼 전통 시스템이 있어요.
HTML로 제작된 웹 시스템이지만<select> 아주 길어요.50개 또는 100개의 선택 항목이 있습니다.자격증 이름, 사업소 일람표 등 비슷한 이름이 많아 지옥이다.
화면에 입력하는 사람에게는 참을 수 없다.눈으로 보기엔 선택이 불가능해.
그래서 나는 전통 시스템에 호흡을 주입할 수 있는 책갈피를 만들었다.

쓸것

Javascript

jQuery

상대방이 유류 시스템이기 때문에 제게 jQuery로 즐기게 해주세요.

코드

이렇게 된 기분이야.평론을 더하면 약 60줄 정도 된다.
구식이라고 하지만 제이큐리로 코드를 썼어요.
select-filter.js

void ((function (f) {
  if (window.jQuery && jQuery().jquery > '2.0') {
    console.log('use jquery');
    f(jQuery);
  } else {
    console.log('load jquery');
    var script = document.createElement('script');
    script.src = '//code.jquery.com/jquery-3.5.1.slim.min.js';
    script.onload = function () {
      var $ = jQuery.noConflict(true);
      f($);
    };
    document.body.appendChild(script);
  }
})(
  function ($, undefined) {
    $('select').each(function (i, select) {
      //selectにidが無ければ、nameから作り出す
      if (!select.id) {
        select.id = select.name + '_' + i;
      }

      let options = $(select).children('option').length;
      let text = `<input type="text" data-selectid="${select.id}" class="__ft">`;
      let badge = `<span id="${select.id}_hit">${options}</span>/<span>${options}</span>`;

      //textboxを突っ込む
      $(select).before(`${text}  ${badge} <br>`);
    });

    //追加したテキストボックス全てに適用するイベントハンドラ
    $('input.__ft').on('input', function (ev) {

      let selector = '#' + $(this).data('selectid');
      let selectid = $(selector).attr('id');
      console.log(selector);

      let txt = this.value;
      console.log(txt);

      //フィルタした瞬間に選択肢を元に戻すならコメントはずす
      // $(selector).prop("selectedIndex", 0);

      let hit = 0;
      $(selector).children('option').each(function (i, e) {
        if (isDefaultOption(e) || matchOption(e, txt)) {
          $(e).show();
          hit++;
        } else {
          $(e).hide();
        }
      });
      $(`span#${selectid}_hit`).text(hit);
    });

    //デフォルトオプションの判定（システムに合わせて適当に書き換える必要があるかも）
    function isDefaultOption(element) {
      return $(element).val() == '' || $(element).hasClass('default');
    }
    //表示する条件(半角全角の調整など必要なことをやるべし)
    function matchOption(element, input) {
      return $(element).text().indexOf(input) != -1;
    }
  }
))

코드도 여기 놔둬.
https://github.com/kanaxx/kanaxx.github.io/tree/master/bookmarklet/select-filter

코드 설명

설명할 코드는 아니지만 일단 계산해 봅시다.$('select') 따라서 화면에 있는 모든'select'를 대상으로 한다.
전통 시스템id이 에 분배되지 않은 상황을 감안하여 name의 값을 바탕으로 에 추가id하였다.
텍스트 상자 바로 아래에 있는'select'의id를 텍스트 상자의data-selectid로 훈련하여 관련성을 가지게 하고class류에 분배__ft류__ft 전체 클래스에 input 이벤트 처리 프로그램을 등록합니다
이벤트 처리 프로그램에서 select에서 옵션을 찾습니다. 부분만 일치합니다. show()

실행

많은 페이지를 선택해야 하기 때문에 스스로 했다.
https://kanaxx.github.io/bookmarklet/select-filter/index.html
F12에서 Devotol을 열고 Constore에 스크립트를 넣으십시오.

초기 디스플레이는 선택만

너무 오래되어 견딜 수 없다

책갈피 책갈피 실행하기(스크립트)
화면 내 선택에 텍스트 상자가 생성됩니다!

필터링 수행
교재에 도(都)를 넣으면 도쿄도(東京都)와 교토부(京都府)는 두 가지 옵션만 있어 쉽게 선택할 수 있다.3/48은 왼쪽이 일치하는 옵션 수를 표시하고 오른쪽은 선택 항목의 총수를 나타낸다.텍스트 상자에서 삭제하면 모두 같다.

총결산

비교적 통용되기 때문에 대다수 사이트의 선택 항목인'select'를 놀라게 할 수 있을 것이다.나는 맨 위의 옵션을 잘 판단할 방법을 찾지 못했다.
마음에 들면 브라우저의 책갈피 표시줄을 등록해 보세요.

참고 자료

국가 일람표는 이곳의 일람표를 사용했다.5년 전 국명이 2020년으로 정해지면 바뀔 수도 있다.
https://qiita.com/tao_s/items/32b90a2751bfbdd585ea