如何使用jquery根据文本字段显示相关选项

Question

我正在尝试实现实时搜索。当我在文本字段中输入任何文本时，它应该与选项中可用的文本匹配。那么它应该在文本框下显示匹配的选项。 到目前为止，我已经尝试过了。 我所取得的是我得到了匹配的文本，我正在提醒它。但我希望它具有匹配结果的下拉列表。

代码

<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>


**jquery code**
$('#location_from_input').keyup(function(){
    
    var txt = $(this).val().toLowerCase();
    // window.alert(txt);
    // lenght  = this.value.length;

    $('#location_from>option').each(function () {
        var text  = $(this).text();
            textL = text.toLowerCase();
            // window.alert(txt);
            (textL.indexOf(txt) == 0) ? window.alert(text) : $(this).hide();
    });
})

我需要你的帮助。谢谢我提前。

Answer 1

您应该禁用与您的搜索不匹配的元素。 使用$('selector').prop('disabled', true) 禁用给定元素。

参考资料：

How to show disable HTML select option in by default?

Answer 2

这里我根据你的要求做了一个类似的方法，你可以试试

$('#selectText').keyup(function () {
        var txt = $(this).val().toLowerCase();
        // window.alert(txt);
        // lenght  = this.value.length;
        var hasMatch = false;
        var matchText = '';
        $('#select>option').each(function () {
            var text = $(this).text();
            textL = text.toLowerCase();
            // window.alert(txt);
            if (textL.indexOf(txt) == -1) {
                $(this).hide();
            } else {
                hasMatch = true;
                matchText = textL;

            }
        });
        if (hasMatch == true) {
            $('#select').val(matchText).change();
        } else {
            $('#select').val('No Match').change();
        }

    })

当没有匹配的记录时返回“No Match”，当有多个值可以选择时，将显示其中一个为选中状态。