[CLOSED] Need ability to search combobox items by lower case or upper case

  1. #1

    [CLOSED] Need ability to search combobox items by lower case or upper case

    Hi,

    In the combobox example below, I can filter down to the customer I am searching but only if what I type in the exact case. How do I make it work regardless of the case?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SelectCustomerOnlyName.aspx.vb"
        Inherits="EXTTabs.SelectCustomerOnlyName" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            Me.Store1.DataSource = New Object() {New Object() {"12345", "ABC Ltd (12345)"}, New Object() {"5444", "XYZ Inc (5444)"}, New Object() {"67677", "Overseas Iron Works (67677)"}, New Object() {"234234", "Software Services(234234)"}, New Object() {"7765756", "Movie Zone(7765756)"}, New Object() {"76866", "Johnson Clips (76866)"}, _
     New Object() {"465464", "Sports House (465464)"}, New Object() {"57655", "Green House (57655)"}}
    
            Me.Store1.DataBind()
    
            btnOkCustomer.Disabled = True
    
        End Sub
    </script>
    
    <!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 id="Head1" runat="server">
        <title></title>
        <style type="text/css">
                 
            .cbCustomers-list th
            {
                font-weight: bold;
            }
            
            .cbCustomers-list td, .cbCustomers-list th
            {
                padding: 3px;
            }
        </style>
        <script type="text/javascript">
            var onKeyUp = function (combo, e) {
                var v = combo.getRawValue();
                combo.store.filter(combo.displayField, new RegExp(v));
                combo.onLoad()
            } 
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="cust-no" />
                        <ext:RecordField Name="name" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                <ext:Parameter Name="limit" Value="5" Mode="Raw" />
            </AutoLoadParams>
        </ext:Store>
        <ext:FormPanel ID="FormPanel1" runat="server" Width="600" Height="400" Title="Form Panel" 
            Padding="5" MonitorResize="true">
            <Items>
                <ext:ComboBox ID="cbCustomers" runat="server" EmptyText="Select Customer" TypeAhead="false"  
                    ForceSelection="true" StoreID="Store1" EnableKeyEvents="true" Mode="Single" DisplayField="name"  
                    ValueField="cust-no" MinChars="1" Width="450" ListWidth="450" PageSize="5" ItemSelector="tr.list-item">
                    <Template ID="Template1" runat="server">
                        <Html>
                            <tpl for=".">
                            <tpl if="[xindex] == 1">
                                <table class="cbCustomers-list">
                                    <tr>
                                        <th>Customer Name</th>
                                    </tr>
                            </tpl>
                            <tr class="list-item">
                                <td style="padding:3px 0px;">{cust-no}</td>
                                <td>{name}</td>
                            </tr>
                            <tpl if="[xcount-xindex]==0">
                                </table>
                            </tpl>
                        </tpl>
                        </Html>
                    </Template>
                    <Triggers>
                        <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                    </Triggers>
                    <Listeners>
                        <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                        <TriggerClick Handler="if (index == 0) { this.focus().clearValue(); trigger.hide();}" />
                        <Select Handler="this.triggers[0].show();btnOkCustomer.enable();" />
                       <TriggerClick Handler="if (index == 0) {this.focus().clearValue();trigger.hide(); btnOkCustomer.disable();}" />
                       <KeyUp Fn="onKeyUp" Delay="500" />
                    </Listeners>
                </ext:ComboBox>
            </Items>
            <Buttons>
                <ext:Button ID="btnOkCustomer" Text="OK" runat="server" FormBind="true" AnchorHorizontal="90%">
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
        </form>
    </body>
    </html>
    Thanks

    Ravi Swaminathan
    Last edited by Daniil; Jul 23, 2012 at 1:57 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please add the case insensitive flag for the regular expression.
    new RegExp(v, "i");
  3. #3

    Need ability to search combobox items by lower case or upper case

    Thanks, Daniil,

    It works!

    Ravi Swaminathan

Similar Threads

  1. Replies: 4
    Last Post: Jul 19, 2012, 8:46 PM
  2. How can i do set TextField only lower case
    By fatihunal in forum 1.x Help
    Replies: 2
    Last Post: Feb 28, 2012, 10:55 PM
  3. [CLOSED] GridPanel sortable: case insensitive
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 05, 2010, 2:27 PM
  4. How can i sort without case sensitivity
    By NishaLijo in forum 1.x Help
    Replies: 2
    Last Post: Aug 19, 2010, 10:44 AM
  5. grid sorting case sensitive?
    By [WP]joju in forum 1.x Help
    Replies: 2
    Last Post: Sep 22, 2009, 6:15 AM

Posting Permissions