CODEWITHSUNDEEP
javascriptregex
usman
usman

Reputation: 1947

Javascript regex pattern

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.

Upvotes: 0

Views: 676

Answers (4)

Peter Boughton
Peter Boughton

Reputation: 112150

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>

Upvotes: 2

jiggy
jiggy

Reputation: 3826

For a simple substring match, you don't need regex, just a plain myString.indexOf(inputString) should suffice. For case-insensitive you can do myString.toUpperCase().indexOf(inputString.toUpperCase()).

Upvotes: 0

hugoware
hugoware

Reputation: 36397

I think it depends a little on where you want to match from. In your example the letter 'a' matches both at the start and the end of "America", is that a sufficient match?

Depending on how you want to filter your data you could use jLinq (Disclaimer: My project :) )

Depending on where you want to match from you may want to use the '\b' option to try and limit where an acceptable match comes from...

\ba - Match 'a' from the start

a\b - match 'a' from the end

Additionally, if you're interested in the value of the match, you could use something like the following...

(?<1>\ba\w+) - This is a little harder to read, but this matches anything that starts with an 'a', but also returns the entire word as a group within the match.

Upvotes: 0

ryanulit
ryanulit

Reputation: 5001

Have the word put into a word boundary as you type. Just replace the [word here] part below with your typing from the textbox.

The expression would be: 

\b[word here]\b

Also, here's a good regex tester.

Upvotes: 0

Related Questions