How to show related options based on text field using jquery

Question

i am trying to achieve live seacrh. when i enter any text in the text field it should match with the text in available in options. then it should show the matching options under textbox. So far i have tried this. What i have achieved is i have got the matching text, and i am alerting it. But i want it to drop down list with matching results.

Code

<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();
    });
})

I need your help. Thanks I Advance.

replace `window.alert(text)` to `$(this).show()` if you just need to show the option where values matches . — Swati, Nov 28 '21 at 14:17

score 1 · Answer 1 · answered Nov 28 '21 at 05:56

1

You should disable the elements that don't match your search. Use $('selector').prop('disabled', true) to disable a given element.

References:

How to show disable HTML select option in by default?

answered Nov 28 '21 at 05:56

Emily

98
1
7

if i write text that matches the option text then options should drop down. how should it be achieved. what should i write in place of window.alert() – Habib Ur Rehman Nov 28 '21 at 06:21
You should make each individual entry disabled by default and enable any option that matches the search. You can disable with the snippet above and enable with `$('selector').prop('disabled', false)` – Emily Nov 30 '21 at 00:06

score 0 · Answer 2 · answered Nov 29 '21 at 06:10

Here I tried to make a similar way based on your requirements, you can have a try

$('#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();
        }

    })

This will return "No Match" when there is no record for matching, also when there are multiple values can be selected, will display one of them as selected.

But to be honest, this method is not effective, you can use "autocomplete" plugin in such case, which is much more convenient. You can have a look https://jqueryui.com/autocomplete/ — Mingze Li, Nov 29 '21 at 06:12

How to show related options based on text field using jquery

2 Answers2