console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        input, button {
            padding: 5px;
            margin-top: 5px;
            margin-bottom: 10px;
        }
        .input-container {
            display: grid;
            width: 200px;
            align-items: center;
            overflow: hidden;
        }
        .input-container input {
            padding: 5px;
            margin-top: 5px;
            margin-bottom: 10px;
        }
        .input-container button {
            position: fixed;
            justify-self: end;
            background-color: lightgray;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;       
            width: 20px;
            height: 20px;
        }
        .input-container button:hover {
            background-color: gray;
        }
        .custom-select {
            position: relative;
            display: inline-block;
            left: -10px;
        }
        .custom-select select {
            padding:10px 0px 10px 30px;
            font-size: 16px;
            border: none;
            appearance: none; /* 移除默认样式 */
            -webkit-appearance: none; /* 移除WebKit默认样式 */
            -moz-appearance: none; /* 移除Mozilla默认样式 */
            background-color: transparent;
            background-image: url('https://img.picui.cn/free/2025/06/19/6853c08bec172.png'); /* 图标地址 */
            background-repeat: no-repeat;
            background-position: left 10px center;
            background-size: 16px 16px;
        }
        .custom-select::after {
              content: "";
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translateY(-50%);
              width: 16px;
              height: 16px;
              background-image: url('https://img.picui.cn/free/2025/06/19/6853c08bec172.png'); /* 图片路径 */
              background-size: cover; /* 根据需要调整 */
              background-position: center; /* 根据需要调整 */
              pointer-events: none; 
        }
        
    </style>
</head>
<body>
    
    <div class="custom-select">
        <select id="mySelect" onchange="updateInputWithSecondValue()">
           <option value="" disabled selected hidden>请选择房间号</option>
            <option data-value1="A幢101" data-value2="杭州吉租科技有限公司">A幢101</option>
            <option data-value1="B幢101" data-value2="浙江豆办网络科技有限公司">B幢100010</option>
            <option data-value1="C幢101" data-value2="浙江日丽能源管理有限公司">C幢101</option>
        </select>
    </div>
  

    <div class="input-container">
        <input type="text" id="searchInput" placeholder="请输入公司名称/房间号" onkeyup="setSelectedOptionByInput()">
        <button id="resetButton" onclick="resetInputs()" style="display:none;">&times;</button>
    </div>

    <script>
        // Function to set the selected option based on a given value
        function setSelectedOptionByValue(value) {
            var options = document.querySelectorAll('#mySelect option');
            options.forEach(function(option) {
                if (option.getAttribute('data-value1') === value || option.getAttribute('data-value2') === value) {
                    document.getElementById('mySelect').value = option.value;
                    document.getElementById('searchInput').value = option.getAttribute('data-value2') || '';
                    toggleResetButton();
                    adjustWidth(); // Adjust width when an option is matched
                }
            });
        }

        // Function to set the selected option based on the input field value
        function setSelectedOptionByInput() {
            var inputValue = document.getElementById('searchInput').value.trim();
            setSelectedOptionByValue(inputValue);
        }

        // Function to update the input field with the second value of the selected option
        function updateInputWithSecondValue() {
            var selectedOption = document.getElementById('mySelect').selectedOptions[0];
            if (selectedOption) {
                document.getElementById('searchInput').value = selectedOption.getAttribute('data-value2') || '';
                toggleResetButton();
                adjustWidth(); // Adjust width when an option is selected
            }
        }

        // Function to reset the inputs
        function resetInputs() {
            document.getElementById('mySelect').value = ''; // Clear the main input field
            document.getElementById('searchInput').value = ''; // Clear the search input field
            toggleResetButton();
            document.getElementById('mySelect').style.width = '156px'; // Reset width to a fixed value
        }

        // Function to toggle the visibility of the reset button
        function toggleResetButton() {
            var searchInput = document.getElementById('searchInput');
            var resetButton = document.getElementById('resetButton');
            if (searchInput.value.trim() !== '') {
                resetButton.style.display = 'inline';
            } else {
                resetButton.style.display = 'none';
            }
        }

        // Function to adjust the width of the select element
        function adjustWidth() {
            const selectElement = document.getElementById('mySelect');
            // 创建一个临时的span元素来测量文本宽度
            const tempSpan = document.createElement('span');
            tempSpan.style.fontSize = getComputedStyle(selectElement).fontSize;
            tempSpan.style.fontFamily = getComputedStyle(selectElement).fontFamily;
            tempSpan.textContent = selectElement.options[selectElement.selectedIndex].text;

            document.body.appendChild(tempSpan);
            const width = tempSpan.offsetWidth + 60; // 加上右边的内边距
            document.body.removeChild(tempSpan);

            selectElement.style.width = `${width}px`;
        }

        document.addEventListener('DOMContentLoaded', function() {
            // 初始调整宽度
            adjustWidth();

            // 监听选中项变化并调整宽度
            document.getElementById('mySelect').addEventListener('change', adjustWidth);
        });

        // Initial check to show or hide the reset button
        document.getElementById('searchInput').addEventListener('input', toggleResetButton);
    </script>
</body>
</html>