combobox typeahead search not only the beginning of string

[Condor]

You really need to use Ext.escapeRe on the query value:

this.store.filter(this.displayField,
  this.matchWordStart ? new RegExp('\\b' + Ext.escapeRe(q), this.queryIgnoreCase ? 'i' : '') : q,
  this.anyMatch, this.queryIgnoreCase);

and

var re = new RegExp(
  '(.*?)(' + (this.matchWordStart ? '\\b' : '') + Ext.escapeRe(this.getRawValue()) + ')(.*)',
  this.queryIgnoreCase ? 'i' : '');

[NightAvatar]

Holy Macaroni, BitPoet you're a genius!!!

Thank you so much!

Edit: And Condor, I see that shortened the code a bit and it still works, so thanks to you too!

[minti82]

This works just wonderful and BitPoet you are just too good at it !!!
I am a new member here and was looking for just exactly the same.
I just have another thing to add.
When I type the word I need to find a match , it works just fine
but when I DELETE some already typed characters the dropdown is still shown right, but the highlight goes away.
Can you help me fix this.

[BitPoet]

When I type the word I need to find a match , it works just fine
but when I DELETE some already typed characters the dropdown is still shown right, but the highlight goes away..

Right, that's something I didn't notice. It's because of the combo's onLoad handler, which only fires typeAhead if the last key wasn't del or backspace. So here's the complete code with an adapted onLoad (and with Condor's change incorporated):

Ext.override( Ext.form.ComboBox, {
    anyMatch: false,
    /* Set to true to match case-insenstively: */
    queryIgnoreCase: false,
    /* Set to true to only match on word start (beginning of string,
       after whitespace or quotation marks: */
    matchWordStart: true,
    doQuery : function(q, forceAll){
        if(q === undefined || q === null){
            q = '';
        }
        var qe = {
            query: q,
            forceAll: forceAll,
            combo: this,
            cancel:false
        };
        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
            return false;
        }
        q = qe.query;
        forceAll = qe.forceAll;
        if(forceAll === true || (q.length >= this.minChars)){
            if(this.lastQuery !== q){
                this.lastQuery = q;
                if(this.mode == 'local'){
                    this.selectedIndex = -1;
                    if(forceAll){
                        this.store.clearFilter();
                    }else{
            this.store.filter(this.displayField,
              this.matchWordStart ? new RegExp('\\b' + Ext.escapeRe(q), this.queryIgnoreCase ? 'i' : '') : q,
              this.anyMatch, this.queryIgnoreCase);
                    }
                    this.onLoad();
                }else{
                    this.store.baseParams[this.queryParam] = q;
                    this.store.load({
                        params: this.getParams(q)
                    });
                    this.expand();
                }
            }else{
                this.selectedIndex = -1;
                this.onLoad();
            }
        }
    }
    ,onTypeAhead: function() {
        var nodes = this.view.getNodes();
        for( var i = 0; i < nodes.length; i++ )
        {
            var n = nodes[i];
            var d = this.view.getRecord( n ).data;
        var re = new RegExp(
          '(.*?)(' + (this.matchWordStart ? '\\b' : '') + Ext.escapeRe(this.getRawValue()) + ')(.*)',
          this.queryIgnoreCase ? 'i' : '');
        var h = d[this.displayField];
            h = h.replace( re, '$1<span class="mark-combo-match">$2</span>$3' );
            n.innerHTML = h;
        }
    }
    ,onLoad : function(){
        if(!this.hasFocus){
            return;
        }
        if(this.store.getCount() > 0){
            this.expand();
            this.restrictHeight();
            if(this.lastQuery == this.allQuery){
                if(this.editable){
                    this.el.dom.select();
                }
                if(!this.selectByValue(this.value, true)){
                    this.select(0, true);
                }
            }else{
                this.selectNext();
                if(this.typeAhead){
                    this.taTask.delay(this.typeAheadDelay);
                }
            }
        }else{
            this.onEmptyResults();
        }
     }
});

[NightAvatar]

BitPoet,

I am using this filter (by Condor) that filters results regardless of space. Lame explanation, but basically it will match 1234 56 7890 even if one omits the space in the search, like: 1234567890

As is, Condor's filter works but it no longer highlights matches, once we pass the space.

Is there a way to implement that space filter into your highlight code?

EDIT: Condor seems to have fixed the space-search issue. But could you look into this highlighting bug? It's not new to Condor's code. It was that way when I was only using your (AWESOME!) highlight code, too. So I'm stumped.

[NightAvatar]

I hope this thread isn't too old for me to mention a new "bug" I found.

When a user types something that matches results in the list, but then decides to click the "dropdown arrow" to trigger opening the full list, then selects an item and then clicks the "dropdown arrow" once again to open the list, the old item matching the typed text is still highlighted, instead of the currently selected item or nothing. (Probably most correct would be to highlight nothing if the dropdown arrow/trigger is pressed, right?)

So how can I reset it to erase the highlight memory when trigger/dropdown button is pressed?

Is it in part of this code?

    onViewClick : function(doFocus){
        var index = this.view.getSelectedIndexes()[0];
        var r = this.store.getAt(index);
        if(r){
            this.onSelect(r, index);
        } else {
            this.collapse();
        }
        if(doFocus !== false){
            this.el.focus();
        }
    }

Thanks!

[Condor]

No, you'd have to call view.refresh() in the onTriggerClick handler.

[NightAvatar]

Thanks Condor. I can't find the onTriggerClick handler, outside the main EXT (ext-all.js) file, which I don't dare edit.

Where can I override that or add the function? I added it to the initEvents function under the "down" onKeyPress, which fixed the bug for when users press "down" arrow when inside the combo. So now I just need to do the same for the trigger click.

EDIT: I think I found the answer. I edited line 129 of my ext-all.js (towards the end of the loooong line), adding the bold blue text below:

...onTriggerClick:function(){if(this.disabled){return }if(this.isExpanded()){this.collapse();this.el.focus()}else{this.view.refresh();this.onFocus({});if(this.triggerAction=="all"){this.doQuery(this.allQuery,true)}else{this.doQuery(this.getRawValue())}this.el.focus()}}});Ext.reg("combo",Ext.form.ComboBox);

[NightAvatar]

I added the code above but now the trigger works ONLY if I enter some text first. If the field is blank, or contains a default value from page-load, then clicking the trigger does nothing!

Any ideas?

EDIT: Nevermind!

I found out the problem. I had placed the function a bit to early in the code above.

It works if I do it this way instead:

...onTriggerClick:function(){if(this.disabled){return }if(this.isExpanded()){this.collapse();this.el.focus()}else{this.onFocus({});if(this.triggerAction=="all"){this.doQuery(this.allQuery,true)}else{this.doQuery(this.getRawValue())}this.view.refresh();this.el.focus()}}});Ext.reg("combo",Ext.form.ComboBox);

[adblockfreak]

I'm using ExtJS 2.2.1, and found that I had to make a couple of tweaks to get case sensitivity to behave correctly. The problem is that queryIgnoreCase is "true" to ignore case, but that variable is passed into data.store.filter as <Boolean caseSensitive>, which is "true" to NOT ignore case. Here are my changes, followed by an explanation.

Ext.override( Ext.form.ComboBox, {
...
      queryCaseSensitive: false,
...
                this.store.filter(this.displayField,
                         this.matchWordStart ? new RegExp('\\b' + Ext.escapeRe(q), this.queryCaseSensitive ? '' : 'i') : q,
                         this.anyMatch, this.queryCaseSensitive);
...
          var re = new RegExp(
                  '(.*?)(' + (this.matchWordStart ? '\\b' : '') + Ext.escapeRe(this.getRawValue()) + ')(.*)',
                  this.queryCaseSensitive ? '' : 'i');

I renamed queryIgnoreCase to queryCaseSensitive to be more consistent with <Boolean caseSensitive>. Then any place where it said this.queryIgnoreCase ? 'i' : '' I swapped to read this.queryCaseSensitive ? '' : 'i'

Before this change, I was seeing weird inconsistency in the case sensitivity. When I had it turned off, "a" would match "<A>lbany" and "C<a>lifornia", but "b" would match "Al<b>erta" and find no match in "Baton Rouge". "al" would match "G<al>lini" but not "<Al>lison".

I hope this helps someone else. Many thanks to everyone for the great code here, and especially to BitPoet for pulling all the tweaks and changes into one unified block of code for us amateurs!