Home/ Questions/Q 232263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T20:00:09+00:00

I have a combo box and input box. If I enter any letter in

  • 0

I have a combo box and input box. If I enter any letter in input box then all the words or sentence that match with that letter should display in the combo box assuming that a list of words or sentence contain in the list.

ex1:)  input box: a
       combo box : America 
                   Australia
                   joy is in Austria

For this example I want JavaScript regex patterns. Anybody give me suggestion.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure I understand exactly what you’re asking for, but I think you don’t want regex, you just want jQuery:

    Like this:

    <!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $j = jQuery.noConflict();

        $j(document).ready(init);

        function init()
        {
            $j('#MyEditBox').change( filterCombo ).keyup( filterCombo );
        }

        function filterCombo()
        {
            var InputText = $j(this).val();
            $j('#MyCombo option:not(:contains('+ InputText +'))').hide();
            $j('#MyCombo option:contains('+ InputText +')').show();
        }
    </script>
</head>
<body>
    <input type="text" id="MyEditBox" />
    <select multiple id="MyCombo">
        <option>America
        <option>Australia
        <option>Something else
        <option>Joy is in Austria
        <option>Wibble
    </select>
</html>

    Update: This one will only match whole words:

    <!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script>
        $j = jQuery.noConflict();


        $j(document).ready(init);


        function init()
        {
            $j('#MyEditBox').change( filterCombo ).keyup( filterCombo );
        }


        function filterCombo()
        {
            var InputText = $j(this).val();

            if (InputText.length > 0)
            {
                $j('#MyCombo option')
                    .hide()
                    .filter(function() { return hasWholeWord( $j(this).val() , InputText ) })
                    .show()
                    ;
            }
            else
            {
                $j('#MyCombo option').show();
            }
        }


        function hasWholeWord( Text , Word )
        {
            return (new RegExp('\\b'+Word+'\\b','i').test( Text ));
        }
    </script>
</head>
<body>
    <input type="text" id="MyEditBox" value="" />
    <select multiple id="MyCombo">
        <option>America
        <option>Australia
        <option>Something else
        <option>Joy is in Austria
        <option>Wibble
    </select>
</html>
    • 0