JQuery (Mobile) / JavaScript Select option cannot be selected

Question

I have created a search filter that detaches the options that does not match with what the user has entered.

For example, the list contains: "hello", "good bye", "halo", and if I enter "h" then it'll only show "hello" and "halo".

The problem I'm facing is that if there is one option I cannot select it, but if there are multiple options I can.

Here is the (full code) JSFiddle: JSFIDDLE LINK

To recreate the problem: Enter "another" in the input box, and try select the "do another" option in the select menu.

I can select any option if there are more than one, so if I enter the word, "do", then I can select either options with that word inside.

var probOptions = $("#problem>option");

function searchFilter() {
    $("#searchInput").change(function() {
        var searchString = $(this).val().toLowerCase();
        $("#problem").empty().append(probOptions);
        $("#problem>option").each(function() {
            var text = $(this).text().toLowerCase();
            if (text.indexOf(searchString) <= -1) {
                $(this).detach();
                // THE LINE BELOW FIXES THE PROBLEM (THE LINE BELOW IS NEWLY ADDED)
                $("#problem").selectmenu("refresh");
            }

        });

    });

}

searchFilter();

Answer 1

I managed to fix the problem myself.

Apparently for JQuery mobile you need to refresh the list, but standard JQuery you don't need to.

Here's the solution (where #problem is the ID of the select menu):

$("#problem").selectmenu("refresh");

Hope this helps anyone that have this problem.