combobox entered value translated

Question

I need to implement transliteration, i.e. I want my combobox to work only on Cyrillic data. When the user enters non Cyrillic character I transform the character into corresponding Cyrillic and return it to the combobox, but my problem here is that the combobox doesn't search my options. When I hit backspace it searches just like it should. I am skipping some event or something I cannot figure out because I am new with JSF.

Here is my combobox:

<ace:comboBox id="somCounty" styleClass="toCyr"
              value="#{myBean.county}"
              valueChangeListener="#{myBean.countyChange}"
              filterMatchMode="contains">
    <f:selectItems id="countiesSelected" value="#{myBean.listAllCounty}"/>
    <ace:ajax render="@this somMunicipality map" execute="@this" />
</ace:comboBox>

and here is my function for mapping characters:

$(".toCyr input:first-child").bind("keyup", function () {
        var elem = $(this);

        var text = $(this).val();
        var convertedText = toCyr(text);
        $(this).val(convertedText);

    });

Note toCyr(char) is a simple function that maps roman characters into cyrillic.

Thank you in advance

Answer 1

I made it, here is my function translate() which I use it to translate a certain character and then press right arrow with code. I use this little fix with the right arrow in order to open the dropdown list which wouldn't show up previously. It doesn't have to be right arrow, it could be shift, ctrl or other key that wouldn't make change to user's text.

function translate(){
//    this selector is specified for jsf generated code
var target = $(".cyrillic input:first-child");
target.each(function () {
    var i = $(this);
    i.keyup(function () {
        $(this).trigger(jQuery.Event('keyup', {keyCode: 39, which: 39}));
    });
    i.on("input", function () {
        var elem = $(this);
        var text = elem.val();
        var convertedText = toCyr(text);
        //  convertedText = convertedText.toUpperCase();
        elem.val(convertedText);
    });
});

}

and here is my event trigger when I click on the combobox container:

$(".west-panel").click(function () {
     translate();
});

here is tab functionality, in my case I have 2 comboboxes, so when the user hits tab instead of click I want to trigger my function again:

$(".west-panel").keydown(function(event){
    if(event.keyCode === 9 || event.which === 9){
        translate();
    } 
 });

I know it's not the best desirable solution, but when you are stuck with components like I am, you have to find a workaround. I test it and it works just fine