☰

下拉选择框改善用户体验

为网页上的下拉选择框添加更好的用户体验 弹出式搜索进行选择

  1. // ==UserScript==
  2. // @name         下拉选择框改善用户体验
  3. // @name:en      Drop Down Select Box Improves User Experience
  4. // @name:zh-CN   下拉选择框改善用户体验
  5. // @name:zh-TW   下拉選單改善使用者體驗
  6. // @name:ja      ドロップダウン選択ボックスがユーザーエクスペリエンスを向上させる
  7. // @name:ko      드롭다운 선택 상자로 사용자 경험 개선
  8. // @name:de      Verbessertes Benutzererlebnis mit Dropdown-Auswahlfeld
  9. // @name:fr      Amélioration de l'expérience utilisateur avec une liste déroulante
  10. // @name:es      Mejora de la experiencia del usuario con cuadro de selección desplegable
  11. // @name:pt      Melhorando a experiência do usuário com caixa de seleção suspensa
  12. // @name:ru      Улучшенный пользовательский опыт с выпадающим списком
  13. // @name:it      Miglioramento dell'esperienza utente con casella di selezione a discesa
  14. // @name:tr      Aşağı açılır seçim kutusuyla kullanıcı deneyimini geliştirme
  15. // @name:ar      تحسين تجربة المستخدم باستخدام خيارات مربع الاختيار القابل للسحب
  16. // @name:th      การปรับปรุงประสบการณ์ของผู้ใช้ด้วยกล่องเลือกแบบเลื่อนลง
  17. // @name:vi      Cải thiện trải nghiệm người dùng với hộp thả xuống lựa chọn
  18. // @name:id      Meningkatkan Pengalaman Pengguna dengan Kotak Pilihan Drop Down
  19. // @namespace   Violentmonkey Scripts
  20. // @match        *://*/*
  21. // @grant       none
  22. // @version     XiaoYing_2023.07.18.7
  23. // @grant       GM_info
  24. // @grant       GM_getValue
  25. // @grant       GM_setValue
  26. // @grant       GM_addStyle
  27. // @grant       GM_deleteValue
  28. // @grant       GM_xmlhttpRequest
  29. // @grant       GM_setClipboard
  30. // @grant       GM_registerMenuCommand
  31. // @grant       GM_unregisterMenuCommand
  32. // @grant       GM_getResourceText
  33. // @grant       GM_getResourceURL
  34. // @grant       GM_openInTab
  35. // @grant       unsafeWindow
  36. // @run-at      document-start
  37. // @author      github.com @XiaoYingYo
  38. // @require     https://greasyfork.org/scripts/464929-module-jquery-xiaoying/code/module_jquery_XiaoYing.js
  39. // @require     https://greasyfork.org/scripts/464780-global-module/code/global_module.js
  40. // @description 为网页上的下拉选择框添加更好的用户体验 弹出式搜索进行选择
  41. // @description:en Add a better user experience for dropdown select boxes on webpages Popup search for selection
  42. // @description:zh-CN 为网页上的下拉选择框添加更好的用户体验 弹出式搜索进行选择
  43. // @description:zh-TW 為網頁上的下拉選擇框添加更好的用戶體驗 彈出式搜索進行選擇
  44. // @description:ja ドロップダウンセレクトボックスのより良いユーザーエクスペリエンスを提供するためのスクリプト ポップアップ検索による選択
  45. // @description:ko 웹 페이지의 드롭다운 선택 상자에 더 나은 사용자 경험 제공 팝업 검색으로 선택
  46. // @description:de Besseres Benutzererlebnis für Dropdown-Auswahlfelder auf Webseiten Popup-Suche zur Auswahl
  47. // @description:fr Améliorez l'expérience utilisateur des menus déroulants sur les pages Web Recherche contextuelle pour la sélection
  48. // @description:es Mejore la experiencia del usuario en los cuadros de selección desplegables en las páginas web Búsqueda emergente para la selección
  49. // @description:pt Adicione uma melhor experiência do usuário para caixas de seleção suspensas em páginas da web Pesquisa de pop-up para seleção
  50. // @description:ru Добавить более удобный пользовательский интерфейс для выпадающих списков на веб-страницах Всплывающий поиск для выбора
  51. // @description:it Aggiungi una migliore esperienza utente per le caselle di selezione a discesa nelle pagine web Ricerca popup per la selezione
  52. // @description:tr Web sayfalarındaki açılır menüler için daha iyi bir kullanıcı deneyimi ekleyin Seçim için açılır arama
  53. // @description:ar أضف تجربة مستخدم أفضل لصناديق الاختيار القابلة للسحب على صفحات الويب بحث منبثق للاختيار
  54. // @description:th เพิ่มประสบการณ์การใช้งานที่ดีขึ้นสำหรับกล่องเลือกที่เหลือบนหน้าเว็บค้นหาโดยกระทำสำหรับการเลือก
  55. // @description:vi Thêm trải nghiệm người dùng tốt hơn cho hộp thả xuống trên các trang web Tìm kiếm xuất hiện cho việc chọn lựa
  56. // @description:id Tambahkan pengalaman pengguna yang lebih baik untuk kotak pilihan drop-down di halaman web Pencarian pop-up untuk pemilihan
  57. // ==/UserScript==
  58.  
  59. var global_module = window['global_module'];
  60. var globalVariable = new Map();
  61.  
  62. (async () => {
  63.     function showModal() {
  64.         let ModalDom = $(`<div id="_select_"><div id="_selectModal_grayMask_"></div><div id="_selectModal_">
  65.             <input type="text" class="input-box">
  66.             <div class="content">
  67.                 <div class="list">
  68.                 </div>
  69.             </div>
  70.         </div></div>`);
  71.         globalVariable.set('ModalDom', ModalDom);
  72.         $('body').append(ModalDom);
  73.         ModalDom.find('.input-box').eq(0).focus();
  74.         ModalDom.find('div[id="_selectModal_grayMask_"]').on('click', function () {
  75.             closeModal();
  76.         });
  77.         return ModalDom;
  78.     }
  79.  
  80.     function addOption(ModalDom, listDomOrStr = null) {
  81.         if (!listDomOrStr) {
  82.             return;
  83.         }
  84.         let listDom = ModalDom.find('div.list').eq(0);
  85.         listDom.append(listDomOrStr);
  86.     }
  87.  
  88.     function closeModal() {
  89.         let modalDom = globalVariable.get('ModalDom');
  90.         modalDom.remove();
  91.         globalVariable.delete('ModalDom');
  92.     }
  93.  
  94.     function initCss() {
  95.         if (globalVariable.get('pageCss')) {
  96.             return;
  97.         }
  98.         let css = `
  99.             #_selectModal_grayMask_ {
  100.                 position: fixed;
  101.                 width: 100%;
  102.                 height: 100%;
  103.                 top: 0;
  104.                 left: 0;
  105.                 background-color: rgba(0, 0, 0, 0.5);
  106.                 z-index: 9999;
  107.             }
  108.  
  109.             #_selectModal_ {
  110.                 position: fixed;
  111.                 width: 90%;
  112.                 height: 90%;
  113.                 background-color: White;
  114.                 top: 5%;
  115.                 left: 5%;
  116.                 z-index: 10000;
  117.             }
  118.  
  119.             .input-box {
  120.                 width: 100%;
  121.                 height: 50px;
  122.                 box-sizing: border-box;
  123.                 padding: 10px;
  124.                 font-size: 16px;
  125.                 border-radius: 5px;
  126.                 border: 2px solid #3438b9;
  127.                 outline: none;
  128.             }
  129.             
  130.             .content {
  131.                 height: calc(100% - 60px);
  132.                 overflow-y: auto;
  133.             }
  134.             
  135.             .list li{
  136.                 list-style: none;
  137.                 text-align: center;
  138.                 border-radius: 5px;
  139.                 border: 1px solid #3438b9;
  140.                 line-height: 36px;
  141.                 margin-top: 8px;
  142.                 margin-right: 10px;
  143.                 margin-left: 10px;
  144.                 cursor: pointer;
  145.             }
  146.             
  147.             @media screen and (min-width: 768px) {
  148.                 .list {
  149.                     display: grid;
  150.                     grid-template-columns: repeat(5, 1fr);
  151.                     gap: 1px;
  152.                 }
  153.             }
  154.             @media screen and (max-width: 767px) {
  155.                 .list {
  156.                     display: grid;
  157.                     grid-template-columns: 1fr;
  158.                     gap: 1px;
  159.                 }
  160.             }
  161.         `;
  162.         globalVariable.set('pageCss', css);
  163.         $('body').append('<style id="selectPageCss">' + css + '</style>');
  164.     }
  165.  
  166.     globalVariable.set('selectSed', 0);
  167.  
  168.     function findSelect() {
  169.         let select = $('select');
  170.         for (let i = 0; i < select.length; i++) {
  171.             let sed = parseInt(globalVariable.get('selectSed').toString());
  172.             globalVariable.set('selectSed', sed + 1);
  173.             let obj = select[i];
  174.             obj.setAttribute('sed', sed);
  175.             (async (that = obj) => {
  176.                 that.addEventListener('click', () => {
  177.                     let ModalDom = showModal();
  178.                     let listDomOrStr = '';
  179.                     let options = that.options;
  180.                     for (let i = 0; i < options.length; i++) {
  181.                         listDomOrStr += `<li onclick="_selectModal_Click_(this,${sed});" index='${i}'>${options[i].innerHTML}</li>`;
  182.                     }
  183.                     addOption(ModalDom, listDomOrStr);
  184.                     ModalDom.find('.input-box')
  185.                         .eq(0)
  186.                         .on(
  187.                             'input',
  188.                             global_module.debounce((e) => {
  189.                                 let val = e.target.value;
  190.                                 let ops = ModalDom.find('div.list').eq(0).find('li');
  191.                                 for (let i = 0; i < ops.length; i++) {
  192.                                     let op = ops[i];
  193.                                     if (val !== '') {
  194.                                         if (op.innerHTML.indexOf(val) === -1) {
  195.                                             op.style.display = 'none';
  196.                                         } else {
  197.                                             op.style.display = 'block';
  198.                                         }
  199.                                     } else {
  200.                                         op.style.display = 'block';
  201.                                     }
  202.                                 }
  203.                             }, 200)
  204.                         );
  205.                     initCss();
  206.                 });
  207.             })();
  208.         }
  209.     }
  210.  
  211.     function selectModalClick(that, sed) {
  212.         closeModal();
  213.         let index = that.getAttribute('index');
  214.         index = parseInt(index);
  215.         let select = $('select[sed=' + sed + ']').eq(0);
  216.         select.prop('selectedIndex', index);
  217.         select[0].focus();
  218.         select[0].dispatchEvent(new Event('change'));
  219.     }
  220.  
  221.     unsafeWindow['_selectModal_Click_'] = selectModalClick;
  222.  
  223.     function main() {
  224.         findSelect();
  225.     }
  226.  
  227.     $(document).ready(() => {
  228.         main();
  229.     });
  230. })();