11 Replies Latest reply on Nov 28, 2011 4:34 AM by siteburn

InplaceSelect filter

tkalactomo Jan 20, 2009 9:08 AM

Is there a possibility to implement filter on this component.
To enable manual input of some text in input text to filter the select items data.

That would be very useful because standard HTML select has a basic filter on first word of the select item.

Rich combo box can filter data but also provides you a possibility to enter
data that you want, data that is not in its select item list.

So my question is:
Is there a possibility, to use text filter with inplace select component on its list of select items?

1. Re: InplaceSelect filter

ilya_shaikovsky Jan 20, 2009 9:29 AM (in response to tkalactomo)

you mean to combine the combobox with select functionality? No it not possible out-of-the-box.
Actions
2. Re: InplaceSelect filter

ilya_shaikovsky Jan 20, 2009 9:29 AM (in response to tkalactomo)

comboBox is just input component with suggestions and inplaceSelect is just select component
Actions
3. Re: InplaceSelect filter

tkalactomo Jan 20, 2009 4:12 PM (in response to tkalactomo)

"ilya_shaikovsky" wrote:
comboBox is just input component with suggestions and inplaceSelect is just select component

I know.
Thanks on response Iya.
I have a list of select items which is big enough, and in it one of those items must be selected.

There comes inplaceSelect, but again that component doesn't have ANY
filter, not even on FIRST letter of the select item value.

Could that be added to the component in future releases, some kind of filter string??
Actions
4. Re: InplaceSelect filter

nbelaevski Jan 20, 2009 10:02 PM (in response to tkalactomo)

Hello,

Can you please clarify: are you asking about quick keyboard search feature as in standard SELECT element or do you want full-featured filtering?
Actions
5. Re: InplaceSelect filter

tkalactomo Jan 21, 2009 2:34 AM (in response to tkalactomo)

"nbelaevski" wrote:
Hello,

Can you please clarify: are you asking about quick keyboard search feature as in standard SELECT element or do you want full-featured filtering?

Hy.
Any kind of filtering...
But if you will do the work already, it would be better to implement a full-featured filtering because of the reason to go ahead of the standard SELECT element filtering...
Actions
6. Re: InplaceSelect filter

ilya_shaikovsky Jan 21, 2009 8:50 AM (in response to tkalactomo)

I still not sure that quite understand how should it work.. It seems for me that you could reuse suggestion box for your selects. It could works better for huge suggestion lists.
Actions
7. Re: InplaceSelect filter

tkalactomo Jan 21, 2009 11:20 AM (in response to tkalactomo)

"ilya_shaikovsky" wrote:
I still not sure that quite understand how should it work.. It seems for me that you could reuse suggestion box for your selects. It could works better for huge suggestion lists.

In a select list like this http://img206.imageshack.us/img206/3698/screenshotfo2.png value which is selected must be from list or nothing,
not some dummy text that you could enter through combo box, or suggestion box!
They suggest you, ok, but allowing you to enter any data that could finish in the model or the backing bean, data which is not from the select item list value.

inplaceSelect:
-filtering
-data is from the select list or nothing if filtering is enabled

For my work ordinary HTML SELECT element which is rendered is ok,
it implements that prevent feature that i need but has poor filtering.

Your component looks better but has no filtering at all on keypress event of the keyboard when is selected...

I hope that you know what am I trying to say to you Iya...
Actions
8. Re: InplaceSelect filter

ilya_shaikovsky Jan 21, 2009 11:31 AM (in response to tkalactomo)

so.. seems we could agreed that there we talking about keyboard search in select feature(like in select). If so feel free to create an RFC for this one in our jira.

I just can't imagine clear how to allow real characters input(for "real" filtering) in this component and prevent dummy text submit. So standard selects search seems more simple and standard way.
Actions
9. Re: InplaceSelect filter

tkalactomo Jan 21, 2009 3:44 PM (in response to tkalactomo)

"ilya_shaikovsky" wrote:
so.. seems we could agreed that there we talking about keyboard search in select feature(like in select). If so feel free to create an RFC for this one in our jira.

I just can't imagine clear how to allow real characters input(for "real" filtering) in this component and prevent dummy text submit. So standard selects search seems more simple and standard way.

Ok, thank you!

Jira reference is here:
https://jira.jboss.org/jira/browse/RF-5839
Actions
10. Re: InplaceSelect filter

pierenzo Jun 9, 2010 4:00 PM (in response to tkalactomo)

function

rich_inplaceSelect_keydown(inplaceEle){

//alert(alonso);

if(!inplaceEle.component)return true;

var inplaceS = inplaceEle.component;

var itemsList = inplaceS.comboList.getItems();

if(!itemsList.length || itemsList.length == 0) return true;

if((event.keyCode >= 48 && event.keyCode <= 90) || (event.keyCode >= 96 && event.keyCode <= 111) || event.keyCode == 32){

var startIndex = (inplaceS.comboList.activeItem) ? inplaceS.comboList.activeItem.value*1 + 1: 0;

if(startIndex == 0 && inplaceS.getValue() != null){
startIndex = inplaceS.getValue()*1 + 1;
}

var i = 0;

for(i = startIndex; i < itemsList.length; i++){

if(itemsList[i].innerText.charAt(0).toLowerCase() == String.fromCharCode(event.keyCode).toLowerCase()){
inplaceS.comboList.doActiveItem(itemsList[i]);
inplaceS.comboList.scrollingUpToItem(itemsList[i]);

return true;
}
}

for(i = 0; i < itemsList.length; i++){

if(itemsList[i].innerText.charAt(0).toLowerCase() == String.fromCharCode(event.keyCode).toLowerCase()){
inplaceS.comboList.doActiveItem(itemsList[i]);
inplaceS.comboList.scrollingUpToItem(itemsList[i]);

return true;
}
}
}

return true;
}

....
<

rich:inplaceSelect ... onkeydown="rich_inplaceSelect_keydown(this);"
>
Actions
11. Re: InplaceSelect filter

siteburn Nov 28, 2011 4:34 AM (in response to pierenzo)

The above script is only working for internet explorer and i modified this for ie and firefox. Thanks to Enzo

function rich_inplaceSelect_keydown(inplaceEle, e) {

    var myKey;

    //condition IE/Firefox
    if (!e) {
        myKey = window.event;
    } else {
        myKey = e.keyCode;
    }

    if (!inplaceEle.component) {
        return true;
    }

    var inplaceS = inplaceEle.component;
    var itemsList = inplaceS.comboList.getItems();
    if (!itemsList.length || itemsList.length == 0) {
        return true;
    }

    if ((myKey >= 48 && myKey <= 90)
            || (myKey >= 96 && myKey <= 111)
            || myKey == 32) {
        var startIndex = (inplaceS.comboList.activeItem) ? inplaceS.comboList.activeItem.value * 1 + 1
                : 0;
        if (startIndex == 0 && inplaceS.getValue() != null) {
            startIndex = inplaceS.getValue() * 1 + 1;
        }
        var i = 0;

        //condition - innerText ist not available at Firefox (textContent)
        if (document.all) {
            for (i = startIndex; i < itemsList.length; i++) {
                if (itemsList[i].innerText.charAt(0).toLowerCase() == String
                        .fromCharCode(myKey).toLowerCase()) {
                    inplaceS.comboList.doActiveItem(itemsList[i]);
                    inplaceS.comboList.scrollingUpToItem(itemsList[i]);
                    return true;
                }
            }
        } else {
            for (i = startIndex; i < itemsList.length; i++) {
                if (itemsList[i].textContent.charAt(0).toLowerCase() == String
                        .fromCharCode(myKey).toLowerCase()) {
                    inplaceS.comboList.doActiveItem(itemsList[i]);
                    inplaceS.comboList.scrollingUpToItem(itemsList[i]);
                    return true;
                }
            }
        }

      //condition - innerText ist not available at Firefox (textContent)
        if (document.all) {
            for (i = 0; i < itemsList.length; i++) {
                if (itemsList[i].innerText.charAt(0).toLowerCase() == String
                        .fromCharCode(myKey).toLowerCase()) {
                    inplaceS.comboList.doActiveItem(itemsList[i]);
                    inplaceS.comboList.scrollingUpToItem(itemsList[i]);
                    return true;
                }
            }
        } else {
            for (i = 0; i < itemsList.length; i++) {
                if (itemsList[i].textContent.charAt(0).toLowerCase() == String
                        .fromCharCode(myKey).toLowerCase()) {
                    inplaceS.comboList.doActiveItem(itemsList[i]);
                    inplaceS.comboList.scrollingUpToItem(itemsList[i]);
                    return true;
                }
            }
        }
    }
    return true;
}
Actions

Go to original post