如何使用jQuery实现根据文本框输入内容下拉展示匹配的option选项

实现方案 #

你只需要新增一个自定义下拉结果容器，改造原有匹配逻辑把结果渲染到容器即可，完整修改如下：

1. HTML结构修改

在输入框下方新增搜索结果展示容器，原有select保留（可隐藏，用于表单提交取值）：

<!-- 输入框外层加相对定位，保证下拉位置正确 -->
<div style="position: relative; width: 100%;">
  <input type="text" id="location_from_input" placeholder="搜索地点">
  <!-- 新增自定义下拉容器 -->
  <div id="search_result" style="display: none; position: absolute; top: 100%; left: 0; z-index: 999; width: 100%; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></div>
</div>

<!-- 原有出发地select，隐藏即可，提交表单时会自动传值 -->
<select name="location_from" id="location_from" class="full-width" style="display: none;">
    <?php
        foreach ( $flight_locations as $flight_location ) {
            echo '<option value="' . esc_attr( $flight_location->term_id ) . '" >' . esc_html( $flight_location->name ) . '</option>';
        }
    ?>
</select>

<!-- 原有目的地select不变 -->
<select name="location_to" class="full-width">
    <?php
        foreach ( $flight_locations as $flight_location ) {
            echo '<option value="' . esc_attr( $flight_location->term_id ) . '" >' . esc_html( $flight_location->name ) . '</option>';
        }
    ?>
</select>

2. jQuery逻辑改造

替换你原来的keyup逻辑，新增下拉选中、点击外部关闭的交互：

// 输入框输入搜索
$('#location_from_input').on('keyup compositionend', function(e) {
    e.stopPropagation();
    const searchTxt = $(this).val().trim().toLowerCase();
    const $resultBox = $('#search_result');

    // 输入为空直接隐藏下拉
    if (!searchTxt) {
        $resultBox.hide();
        return;
    }

    let resultHtml = '';
    // 遍历option匹配内容
    $('#location_from option').each(function() {
        const optionText = $(this).text();
        const optionVal = $(this).val();
        if (optionText.toLowerCase().indexOf(searchTxt) === 0) {
            // 匹配到的内容高亮显示
            const renderText = optionText.replace(new RegExp(`^(${searchTxt})`, 'i'), '<span style="color: #1890ff; font-weight: bold;">$1</span>');
            resultHtml += `<div class="result-item" data-val="${optionVal}" data-text="${optionText}" style="padding: 8px 12px; cursor: pointer;">${renderText}</div>`;
        }
    });

    // 无匹配结果提示
    if (!resultHtml) {
        resultHtml = '<div style="padding: 8px 12px; color: #999;">无匹配地点</div>';
    }

    // 渲染结果并显示下拉
    $resultBox.html(resultHtml).show();
})

// 点击下拉项回填
$(document).on('click', '.result-item', function(e) {
    e.stopPropagation();
    const selectText = $(this).data('text');
    const selectVal = $(this).data('val');
    // 回填输入框
    $('#location_from_input').val(selectText);
    // 给原有select赋值，保证表单提交正常
    $('#location_from').val(selectVal);
    // 关闭下拉
    $('#search_result').hide();
})

// 点击页面其他位置关闭下拉
$(document).on('click', function() {
    $('#search_result').hide();
})

自定义调整说明

• 若不需要首字符匹配，只要包含搜索词就展示，把optionText.toLowerCase().indexOf(searchTxt) === 0改为optionText.toLowerCase().includes(searchTxt)即可
• 代码中的行内样式可以抽为独立CSS类，方便统一维护
• 新增的compositionend事件用于兼容中文输入，避免未输入完成就触发搜索

内容的提问来源于stack exchange，提问作者Habib Ur Rehman