Combobox Partial String Search for List Item

Page 1 of 2 12 LastLast

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Combobox Partial String Search for List Item

    When you make a combobox editable, you are able to type the name of any items listed in the combobox and filter out the items that do not match. This works great but I have a need to be able to search for any part of the strings in the list items.

    For example:
    Let's say my list contains the following values


    Book
    Bookcase
    Briefcase
    Chair
    Canada


    I would like for the user to be able to start typing any portion of the list items for example:


    user types 'C'


    the combobox is searched for the letter C and finds:
    Bookcase
    Briefcase
    Chair
    Canada


    the user continues to type and types the letter 'A', now the list is narrowed down to anything that contatins 'CA'
    Boookcase
    Briefcase
    Canada


    the user continues to type and types the letter 'N', now the list is narrowed down to anything that contatins 'CAN'
    Canada




    Is this use case feasible?


    Thanks
  2. #2

    RE: Combobox Partial String Search for List Item

    Hi GolchK,

    Well, this is an interesting problem. I can see this being very helpful functionality, although at the moment there is not a clean way to accomplish this in v0.8.x.


    I did a little research and it appears ExtJS 3.2, which is the next release, will include the ability to configure a custom .filterFn.


    Someone has implemented a nifty little ComboBox Plugin (http://www.extjs.com/forum/showthrea...926#post429926) which enables the .filterFn config item, although I'm unsure if this will work with our v0.8.x. It will certainly work with the upcoming v1.0 release.


    I'm going to run a couple tests and get back to you.


    Geoffrey McGill
    Founder
  3. #3

    RE: Combobox Partial String Search for List Item

    Yes, the Plugin linked to above works great.

    The following code sample demonstrates how to configure an <ext:GenericPlugin> for the ComboBox using v1.0.

    Example (.aspx)

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:ComboBox ID="ComboBox1" runat="server">
                <Items>
                    <ext:ListItem Text="Book" />
                    <ext:ListItem Text="Bookcase" />
                    <ext:ListItem Text="Briefcase" />
                    <ext:ListItem Text="Chair" />
                    <ext:ListItem Text="Canada" />
                </Items>
                <Plugins>
                    <ext:GenericPlugin 
                        runat="server" 
                        Path="CustomFilterCombo.js" 
                        AnyMatch="true" 
                        InstanceName="Ext.ux.plugins.CustomFilterCombo" 
                        />
                </Plugins>
            </ext:ComboBox>
        </form>
    </body>
    </html>
    Example (CustomFilterCombo.js)

    Ext.ns('Ext.ux.plugins');
    
    /**
     * allow custom value in combobox
     * if the entered value is not found in the store the value is used as the combos value
     * 
     * @author Gustav Rek
     * @date 21.01.2010
     * @version 1
     * 
     */
    
    Ext.ux.plugins.CustomFilterCombo = function(config) {
        Ext.apply(this, config);
        
        Ext.ux.plugins.CustomFilterCombo.superclass.constructor.call(this);
    };
    
    Ext.extend(Ext.ux.plugins.CustomFilterCombo, Object, {
        
        /**
         * @cfg {Boolean} anyMatch <tt>true</tt> to match any part not just the beginning (default=false)
         */
        anyMatch : false,
        
        /**
         * @cfg {Boolean} caseSensitive <tt>true</tt> for case sensitive comparison (default=false)
         */
        caseSensitive : false,
        
        /**
         * @cfg {Function} filterFn Filter by a function. This function will be called for each
         * Record in this Store. If the function returns <tt>true</tt> the Record is included,
         * otherwise it is filtered out (default=undefined).
         * When using this parameter anyMathch and caseSensitive are ignored!
         * @param {Ext.data.Record} record  The {@link Ext.data.Record record}
         * to test for filtering. Access field values using {@link Ext.data.Record#get}.
         * @param {Object} id The ID of the Record passed.
         * @param {String} field The field filtered in (normally the displayField of the combo).
         * Use this with {@link Ext.data.Record#get} to fetch the String to match against.
         * @param {String} value The value typed in by the user.
         */
        filterFn : undefined,
        
        init : function(combo) {
            this.combo = combo;
            
            if(Ext.isFunction(this.filterFn)) {
                combo.store.filter = this.filterBy.createDelegate(this);
            } else {
                // save this funtcion for later use, before we overwrite it
                combo.store.originalFilter = combo.store.filter;
                combo.store.filter = this.filter.createDelegate(this);
            }
        },
        
        // scope: this
        filterBy : function(field, value) {
            this.combo.store.filterBy(this.filterFn.createDelegate(this.combo, [field, value], true));        
        },
        
        // scope: this
        filter : function(field, value) {
            this.combo.store.originalFilter(field, value, this.anyMatch, this.caseSensitive);
        }
    });
    
    Ext.preg('customfiltercombo', Ext.ux.plugins.CustomFilterCombo);
    Hope this helps.

    Geoffrey McGill
    Founder
  4. #4

    RE: Combobox Partial String Search for List Item

    If TypeAhead="true" is set on the <ext:ComboBox> the CustomFilterCombo is not going to work properly.

    Geoffrey McGill
    Founder
  5. #5

    RE: Combobox Partial String Search for List Item

    If you're using v0.8.x, you can configure the <ext:GenericPlugin> as follows.

    Example

    <ext:GenericPlugin runat="server" Path="CustomFilterCombo.js" InstanceName="Ext.ux.plugins.CustomFilterCombo">
        <CustomConfig>
            <ext:ConfigItem Name="anyMatch" Value="true" />
        </CustomConfig>
    </ext:GenericPlugin>
    Hope this helps.

    Geoffrey McGill
    Founder
  6. #6

    RE: Combobox Partial String Search for List Item

    I should also point out that the .Path of the GenericPlugin can be relative as it will get resolved to a proper full path automatically.

    For example, if you wanted to store the .js file in /scripts/plugins/ folder in your local app, you would configure the .Path as follows.

    Example

    Path="~/scripts/plugins/CustomFilterCombo.js"
    You can also omit the .Path property and just include the plugin <script> inline on the page.

    Hope this helps.

    Geoffrey McGill
    Founder
  7. #7

    RE: Combobox Partial String Search for List Item

    Geoffrey,

    Thanks so much for your quick reply. I attempted the below code and was not able to implement this properly. I am running the 0.82 version of coolite.

    I followed your directions and added the CustomFilterCombo.js file to the root of the website.

    Here is the code which I used,

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
        <form id="form1" runat="server">
        
            <ext:ComboBox ID="ComboBox1" runat="server">
                <Items>
                    <ext:ListItem Text="Book" />
                    <ext:ListItem Text="Bookcase" />
                    <ext:ListItem Text="Briefcase" />
                    <ext:ListItem Text="Chair" />
                    <ext:ListItem Text="Canada" />
                </Items>
                <Plugins>
                    <ext:GenericPlugin ID="GenericPlugin1" runat="server" Path="CustomFilterCombo.js"
                        InstanceName="Ext.ux.plugins.CustomFilterCombo">
                        <CustomConfig>
                            <ext:ConfigItem Name="anyMatch" Value="true" />
                        </CustomConfig>
                    </ext:GenericPlugin>
                </Plugins>
            </ext:ComboBox>
        
    
        </form>
    </body>
    </html>
    The above code produced the following error.

    _____________________________________________
    Server Error in '/WebSite3' Application.
                
    The Plugin GenericPlugin1 does not contain an "InstanceOfAttribute" or the "InstanceOf" property has not been set.
    
    Description: An
    unhandled exception occurred during the execution of the current web
    request. Please review the stack trace for more information about the
    error and where it originated in the code. 
    
    Exception Details: System.ArgumentException:
    The Plugin GenericPlugin1 does not contain an "InstanceOfAttribute" or
    the "InstanceOf" property has not been set.
    
    ________________________________
    based on the above result, I changed the InstanceName attribute of the plugin to InstanceOf then started the website again, I did not get any errors. the combobox control did not load at all and all I got was a blank page.

    I imagine this code is very close. any ideas as to what is causing the issue?

    Thank you for your time

  8. #8

    RE: Combobox Partial String Search for List Item

    Geoffrey,

    Do you have an idea on how i should proceed with this issue?


    Thanks
  9. #9

    RE: Combobox Partial String Search for List Item

    Geoffrey,

    I have implemented your example in a sample. I'm using coolite 0.82 and am still having trouble configuring this to work. It would be really helpful to get a workaround for this issue on 0.82. Below is the code I used and the detail of the errors I received upon running the code.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
        
            <ext:ComboBox ID="ComboBox1" runat="server">
                <Items>
                    <ext:ListItem Text="Book" />
                    <ext:ListItem Text="Bookcase" />
                    <ext:ListItem Text="Briefcase" />
                    <ext:ListItem Text="Chair" />
                    <ext:ListItem Text="Canada" />
                </Items>
                <Plugins>
                    <ext:GenericPlugin ID="GenericPlugin1" runat="server" Path="CustomFilterCombo.js"
                        InstanceName="Ext.ux.plugins.CustomFilterCombo">
                        <CustomConfig>
                            <ext:ConfigItem Name="anyMatch" Value="true" />
                        </CustomConfig>
                    </ext:GenericPlugin>
                </Plugins>
            </ext:ComboBox>
        
    
        </form>
    </body>
    </html>

    When I attempted to run the above code I got the following errors returned to me.

    [CODE]The Plugin GenericPlugin1 does not contain an "InstanceOfAttribute" or the "InstanceOf" property has not been set.[/cpde]


    I changed the InstanceName property of the GenericPlugin to InstanceOf and ran the project. Luckily this seemed to get over the initial hump of not being able to load the page but I did recieve several Javascript errors. The following is a detailed report of the error messages I recieved and the corresponding lines in the javascript file.

    1.

    Microsoft JScript runtime error: Object doesn't support this property or method
    
    Line68
    
    Ext.preg('customfiltercombo', Ext.ux.plugins.CustomFilterCombo);
    2. I hit the ignore button on the error and received the same error message again

    Microsoft JScript runtime error: Object doesn't support this property or method
    
    Line48
    
    if(Ext.isFunction(this.filterFn)) {
    3. I hit the ignore button on the error. The page loaded with the combobox.
    Upon entering any values into the combobox I received the following error message and naturally nothing was filtered in the combobox.

    Microsoft JScript runtime error: 'this.filterFn' is null or not an object
    
    Line59
    
    this.combo.store.filterBy(this.filterFn.createDelegate(this.combo, [field, value], true));
    Best Regards
  10. #10

    RE: Combobox Partial String Search for List Item

    I've got a working solution to using this code, at least with 0.8.2

    1 - Add the javascript for CustomFilterCombo.js that Geoffrey posted to your page, changing the last line so that it starts "Ext.reg" rather than "Ext.preg"
    2 - Register an onload handler with Ext.onReady() that does the following:

        // "combo" is the combobox that you wish to add the searching to
    
        var plugins = [];
        plugins.push(new Ext.ux.plugins.CustomFilterCombo({
            anyMatch: true,
            caseSensitive: true
        }));
    
        combo.addPlugins(plugins);
    It worked for me, so hopefully it'll work for you too :)
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 18
    Last Post: Jul 20, 2011, 8:59 PM
  2. Custom Search ComboBox with String.Contains
    By BLOZZY in forum 1.x Help
    Replies: 0
    Last Post: Jan 28, 2011, 12:22 PM
  3. Replies: 1
    Last Post: Dec 15, 2010, 3:07 PM
  4. [CLOSED] [1.0] Selecting Combobox expanded list item through Tab key
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 02, 2010, 4:54 PM
  5. [CLOSED] ComboBox Item List not displaying full Width
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 10:12 PM

Posting Permissions