I have found solution and it works for me. :)
Here is the solution, if you may need this in your any project-
Step 1: Added name text fields on HTML form. I user jQuery ToolTip for showing phonetic name suggetions
<input type="text" id="txtFname" name="txtFname" class="phonetic" value="" title="" />
<input type="text" id="txtMname" name="txtMname" class="phonetic" value="" title="" />
<input type="text" id="txtSname" name="txtSname" class="phonetic" value="" title="" />
Step 2: Designed a javascript function 'GetPhoneticSuggestion' to get phonetic string.
function GetPhoneticSuggestion(string) {
var arrPhonetic = [
{ key: 'a', value: 'Alpha' },
{ key: 'b', value: 'Bravo' },
{ key: 'c', value: 'Charlie' },
{ key: 'd', value: 'Delta' },
{ key: 'e', value: 'Echo' },
{ key: 'f', value: 'Foxtrot' },
{ key: 'g', value: 'Golf' },
{ key: 'h', value: 'Hotel' },
{ key: 'i', value: 'India' },
{ key: 'j', value: 'Juliet' },
{ key: 'k', value: 'kilo' },
{ key: 'l', value: 'Lima' },
{ key: 'm', value: 'Mike' },
{ key: 'n', value: 'November' },
{ key: 'o', value: 'Oscar' },
{ key: 'p', value: 'Papa' },
{ key: 'q', value: 'Quebec' },
{ key: 'r', value: 'Romeo' },
{ key: 's', value: 'Sierra' },
{ key: 't', value: 'Tango' },
{ key: 'u', value: 'Uniform' },
{ key: 'v', value: 'Victor' },
{ key: 'w', value: 'Wiskey' },
{ key: 'x', value: 'X-Ray' },
{ key: 'y', value: 'Yankee' },
{ key: 'z', value: 'Zulu' }
];
var phoneticWord = '';
for (l = 0; l < string.length; l++) {
$.each(arrPhonetic, function (i, k) {
if (k.key == string[l]) {
phoneticWord += k.value + ' - ';
return false;
} else if ($.trim(string[l]) == '') {
phoneticWord += ' |SPACE| '+ ' - ';
return false;
}
});
}
phoneticWord = $.trim(phoneticWord.substring(0, phoneticWord.lastIndexOf('-')));
return phoneticWord;
}
Step 3: Call it on HTML page where i put my textboxes
Include below JS and CSS
* jquery-ui.css
* jquery-1.11.1.js
* jquery-1.10.2.js
* jquery-ui.js
<script type="text/javascript">
$(function () {
$('.phonetic').tooltip({
content: function () {
if ($.trim($(this).val()) != '')
return GetPhoneticSuggestion($.trim($(this).val().toLowerCase()));
}
});
});
</script>