Hi,
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.
Thanks
Usman.sk
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.
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>
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.
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()).