Intercept selection in AW.UI.Combo

Okay, I am using the stand-alone combo box to create an auto complete kind of combo that uses AJAX to get matches that include what the user is typing. These matches are parsed and the section of each option that matched is bolded.

Now, when I select an item from the drop-down, the item gets passed into the box. However, I need to strip out the <strong> tags. What's the best way to do this?

Here's the code:
vendorCombo.onControlTextChanged = function(text){
    // length of text in combo must be at least three or more chars
    if (text.length > 2) {
        var r = new AW.HTTP.Request;
        r.setURL("../internal/matchVendorNameSnippet.asp");
        r.setRequestMethod("POST");
        r.setParameter("NM", text );
        r.request();
        r.response = function( data ) {
            if ( data.substr(0,5) != "ERROR" ) {
                // bold the sections with the match
                bld = new RegExp( "(" + text + ")", "gi" );
                data = data.replace( bld, "<strong>$1</strong>");
                // split into array and remove the success marker
                arr = data.replace(/SUCCESS:/, "").split("|");
                vendorCombo.setItemCount( arr.length );
                vendorCombo.setItemText( arr );
                vendorCombo.setItemValue( arr );
                vendorCombo.showPopup();
            }
        }
    }
    else {
        vendorCombo.setItemCount( 0 );
        vendorCombo.setItemText( null );
        vendorCombo.setItemValue( null );
        vendorCombo.hidePopup();
    }
}

- alphadog

To add:

If I enter "pany", I will see "Big Company ABC".

If I select it, what appears in the textbox is "Big Com<strong>pany</strong> ABC".

I need to obviously remove the HTML tags. Is there an ideal event to tie into? Or, should I subclass and modify a particular method?

Thanks.

- alphadog

One solution to be able to move ahead: I created a new AW.UI.combo called AW.UI.HTMLStripCombo.

AW.UI.HTMLStripCombo = AW.UI.List.subclass();

AW.UI.HTMLStripCombo.create = function(){

    AW.UI.ImageText.create.call(this);
    AW.UI.Input.create.call(this);
    AW.Templates.Combo.create.call(this);

    var obj = this.prototype;

    obj.setClass("ui", "combo");
    obj.setClass("input", "");

    obj.defineTemplate("popup", new AW.Templates.Frame);

    obj.onCurrentItemChanged = function(i){
        var text = this.getItemText(i);
        this.setControlText(text);

        this.hidePopup();
        
        // strip-out any HTML tags from text
        text = text.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
        //text = text.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");

        var e = this.getContent("box/text").element();
        if (AW.safari) {
            e.innerHTML = text;
        }
        else {
            e.value = text;
            e.select();
        }
        e = null;
    };

    obj.setController("selection", {
        onKeyUp: "selectPreviousItem",
        onKeyDown: "selectNextItem",
        onItemClicked: "selectClickedItem"
    });

};

BTW, in case it is missed by the newbie-ish developer, the data returned by my ASP page is a pipe-separated string, not some sort of overly bloated XML-based response, thus why I split the data variable on the "|".

Also, the showPopup() line has been changed to:
if ( (arr.length > 1) || (text != arr[0]) ) vendorCombo.showPopup();

That way, the drop-down down not, well, drop down immediately after you select an item from the list, unless there is more than one item in the list or their is one oitem, but it doesn't match completely.

Hi Paul,
nice code. I like it.
It shows, that its not so hard to do "non standard" things with AW.
I had that in mind for some time, but I was not "brave" enough to give it a try.

Thanks, ralf.

I'll add to any reader that I created the a separate .js file for my new control, which I include just after the call to aw.js. I'm not sure what best practices are concerning how to subclass from AW.

Minor adjustment to the event handler where the regexp is run before the call to setControlText();

obj.onCurrentItemChanged = function(i){
        var text = this.getItemText(i);
        // strip-out any HTML tags from text
        text = text.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
        
        this.setControlText(text);
        this.hidePopup();
        
        var e = this.getContent("box/text").element();
        if (AW.safari) {
            e.innerHTML = text;
        }
        else {
            e.value = text;
            e.select();
        }
        e = null;
    };

Another thing that may be useful to readers is that if you use setSelectedItems() and setControlText() to default the combo on page load, make sure you strip out HTML in the latter method:

versionCombo.setSelectedItems([2]);
versionCombo.setControlText(versionCombo.getItemText(versionCombo.getSelectedItems()).replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, ""));