☰

Mejora de la experiencia del usuario con cuadro de selección desplegable

Mejore la experiencia del usuario en los cuadros de selección desplegables en las páginas web Búsqueda emergente para la selección

// ==UserScript==
// @name         下拉选择框改善用户体验
// @name:en      Drop Down Select Box Improves User Experience
// @name:zh-CN   下拉选择框改善用户体验
// @name:zh-TW   下拉選單改善使用者體驗
// @name:ja      ドロップダウン選択ボックスがユーザーエクスペリエンスを向上させる
// @name:ko      드롭다운 선택 상자로 사용자 경험 개선
// @name:de      Verbessertes Benutzererlebnis mit Dropdown-Auswahlfeld
// @name:fr      Amélioration de l'expérience utilisateur avec une liste déroulante
// @name:es      Mejora de la experiencia del usuario con cuadro de selección desplegable
// @name:pt      Melhorando a experiência do usuário com caixa de seleção suspensa
// @name:ru      Улучшенный пользовательский опыт с выпадающим списком
// @name:it      Miglioramento dell'esperienza utente con casella di selezione a discesa
// @name:tr      Aşağı açılır seçim kutusuyla kullanıcı deneyimini geliştirme
// @name:ar      تحسين تجربة المستخدم باستخدام خيارات مربع الاختيار القابل للسحب
// @name:th      การปรับปรุงประสบการณ์ของผู้ใช้ด้วยกล่องเลือกแบบเลื่อนลง
// @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
// @name:id      Meningkatkan Pengalaman Pengguna dengan Kotak Pilihan Drop Down
// @namespace   Violentmonkey Scripts
// @match        *://*/*
// @grant       none
// @version     XiaoYing_2023.07.18.7
// @grant       GM_info
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_addStyle
// @grant       GM_deleteValue
// @grant       GM_xmlhttpRequest
// @grant       GM_setClipboard
// @grant       GM_registerMenuCommand
// @grant       GM_unregisterMenuCommand
// @grant       GM_getResourceText
// @grant       GM_getResourceURL
// @grant       GM_openInTab
// @grant       unsafeWindow
// @run-at      document-start
// @author      github.com @XiaoYingYo
// @require     https://greasyfork.org/scripts/464929-module-jquery-xiaoying/code/module_jquery_XiaoYing.js
// @require     https://greasyfork.org/scripts/464780-global-module/code/global_module.js
// @description 为网页上的下拉选择框添加更好的用户体验 弹出式搜索进行选择
// @description:en Add a better user experience for dropdown select boxes on webpages Popup search for selection
// @description:zh-CN 为网页上的下拉选择框添加更好的用户体验 弹出式搜索进行选择
// @description:zh-TW 為網頁上的下拉選擇框添加更好的用戶體驗 彈出式搜索進行選擇
// @description:ja ドロップダウンセレクトボックスのより良いユーザーエクスペリエンスを提供するためのスクリプト ポップアップ検索による選択
// @description:ko 웹 페이지의 드롭다운 선택 상자에 더 나은 사용자 경험 제공 팝업 검색으로 선택
// @description:de Besseres Benutzererlebnis für Dropdown-Auswahlfelder auf Webseiten Popup-Suche zur Auswahl
// @description:fr Améliorez l'expérience utilisateur des menus déroulants sur les pages Web Recherche contextuelle pour la sélection
// @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
// @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
// @description:ru Добавить более удобный пользовательский интерфейс для выпадающих списков на веб-страницах Всплывающий поиск для выбора
// @description:it Aggiungi una migliore esperienza utente per le caselle di selezione a discesa nelle pagine web Ricerca popup per la selezione
// @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
// @description:ar أضف تجربة مستخدم أفضل لصناديق الاختيار القابلة للسحب على صفحات الويب بحث منبثق للاختيار
// @description:th เพิ่มประสบการณ์การใช้งานที่ดีขึ้นสำหรับกล่องเลือกที่เหลือบนหน้าเว็บค้นหาโดยกระทำสำหรับการเลือก
// @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
// @description:id Tambahkan pengalaman pengguna yang lebih baik untuk kotak pilihan drop-down di halaman web Pencarian pop-up untuk pemilihan
// ==/UserScript==

var global_module = window['global_module'];
var globalVariable = new Map();

(async () => {
    function showModal() {
        let ModalDom = $(`<div id="_select_"><div id="_selectModal_grayMask_"></div><div id="_selectModal_">
            <input type="text" class="input-box">
            <div class="content">
                <div class="list">
                </div>
            </div>
        </div></div>`);
        globalVariable.set('ModalDom', ModalDom);
        $('body').append(ModalDom);
        ModalDom.find('.input-box').eq(0).focus();
        ModalDom.find('div[id="_selectModal_grayMask_"]').on('click', function () {
            closeModal();
        });
        return ModalDom;
    }

    function addOption(ModalDom, listDomOrStr = null) {
        if (!listDomOrStr) {
            return;
        }
        let listDom = ModalDom.find('div.list').eq(0);
        listDom.append(listDomOrStr);
    }

    function closeModal() {
        let modalDom = globalVariable.get('ModalDom');
        modalDom.remove();
        globalVariable.delete('ModalDom');
    }

    function initCss() {
        if (globalVariable.get('pageCss')) {
            return;
        }
        let css = `
            #_selectModal_grayMask_ {
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 9999;
            }

            #_selectModal_ {
                position: fixed;
                width: 90%;
                height: 90%;
                background-color: White;
                top: 5%;
                left: 5%;
                z-index: 10000;
            }

            .input-box {
                width: 100%;
                height: 50px;
                box-sizing: border-box;
                padding: 10px;
                font-size: 16px;
                border-radius: 5px;
                border: 2px solid #3438b9;
                outline: none;
            }
            
            .content {
                height: calc(100% - 60px);
                overflow-y: auto;
            }
            
            .list li{
                list-style: none;
                text-align: center;
                border-radius: 5px;
                border: 1px solid #3438b9;
                line-height: 36px;
                margin-top: 8px;
                margin-right: 10px;
                margin-left: 10px;
                cursor: pointer;
            }
            
            @media screen and (min-width: 768px) {
                .list {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 1px;
                }
            }
            @media screen and (max-width: 767px) {
                .list {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1px;
                }
            }
        `;
        globalVariable.set('pageCss', css);
        $('body').append('<style id="selectPageCss">' + css + '</style>');
    }

    globalVariable.set('selectSed', 0);

    function findSelect() {
        let select = $('select');
        for (let i = 0; i < select.length; i++) {
            let sed = parseInt(globalVariable.get('selectSed').toString());
            globalVariable.set('selectSed', sed + 1);
            let obj = select[i];
            obj.setAttribute('sed', sed);
            (async (that = obj) => {
                that.addEventListener('click', () => {
                    let ModalDom = showModal();
                    let listDomOrStr = '';
                    let options = that.options;
                    for (let i = 0; i < options.length; i++) {
                        listDomOrStr += `<li onclick="_selectModal_Click_(this,${sed});" index='${i}'>${options[i].innerHTML}</li>`;
                    }
                    addOption(ModalDom, listDomOrStr);
                    ModalDom.find('.input-box')
                        .eq(0)
                        .on(
                            'input',
                            global_module.debounce((e) => {
                                let val = e.target.value;
                                let ops = ModalDom.find('div.list').eq(0).find('li');
                                for (let i = 0; i < ops.length; i++) {
                                    let op = ops[i];
                                    if (val !== '') {
                                        if (op.innerHTML.indexOf(val) === -1) {
                                            op.style.display = 'none';
                                        } else {
                                            op.style.display = 'block';
                                        }
                                    } else {
                                        op.style.display = 'block';
                                    }
                                }
                            }, 200)
                        );
                    initCss();
                });
            })();
        }
    }

    function selectModalClick(that, sed) {
        closeModal();
        let index = that.getAttribute('index');
        index = parseInt(index);
        let select = $('select[sed=' + sed + ']').eq(0);
        select.prop('selectedIndex', index);
        select[0].focus();
        select[0].dispatchEvent(new Event('change'));
    }

    unsafeWindow['_selectModal_Click_'] = selectModalClick;

    function main() {
        findSelect();
    }

    $(document).ready(() => {
        main();
    });
})();