[CLOSED] Combo Box Autocompletion using characters from the middle of the display values

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Combo Box Autocompletion using characters from the middle of the display values

    Hi there,
    I am trying to get my ComboBox to auto complete as I type. It is working fine if I start with the beginning of the string e.g. 1003. However If I start with a character from the middle like "London" it doesn't auto complete. Is there a way to achieve this?

    My ComboBox contains the list below:
    1001 New York
    1002 Mumbai
    1003 Berlin
    1004 Istanbul
    1005 London

    Click image for larger version. 

Name:	works.JPG 
Views:	54 
Size:	41.0 KB 
ID:	6346

    Click image for larger version. 

Name:	fails.JPG 
Views:	39 
Size:	43.3 KB 
ID:	6347

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyCombo.aspx.cs" Inherits="OffLineExtTest.Pages.MyCombo" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
      
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
    
                List<string> cities = new List<string>();
                cities.Add("New York");
                cities.Add("Mumbai");
                cities.Add("Berlin");
                cities.Add("Istanbul");
                cities.Add("London");
                List<Location> LocationList = new List<Location>();
                for (int i = 1; i < 5; i++)
                {
                    var name = cities.ElementAt(i);
                    var location = new Location()
                                      {
                                          LocationKey = 1000+i,
                                          LocationName = 1000 + i+ " " +name
                                      };
                    LocationList.Add(location);
    
                }
                stLocationStore.DataSource = LocationList;
                stLocationStore.DataBind();
            }
    
        }
        public class Location
        {
            public int LocationKey { get; set; }
            public string LocationName { get; set; }
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:ComboBox ID="cmbLocation" Name="recKey" runat="server" TypeAhead="true" MinChars="1"
            MatchFieldWidth="false" DisplayField="LocationName" ValueField="LocationKey" EmptyText="Select Location"
            Editable="true" ForceSelection="true" AllowBlank="false" Mode="Local" AutoSelect="true"
            Width="300" FieldLabel="Location">
            <Store>
                <ext:Store ID="stLocationStore" runat="server">
                    <Model>
                        <ext:Model ID="Model4" runat="server" IDProperty="Divnum">
                            <Fields>
                                <ext:ModelField Name="LocationKey" />
                                <ext:ModelField Name="LocationName" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
        </ext:ComboBox>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 02, 2013 at 4:02 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Look at the following thread: http://forums.ext.net/showthread.php?20403
  3. #3
    Hi,

    I am afraid setting EnableRegEx="true" won't be enough for the autocomplete functionality.

    Please also add the following override.

    Ext.form.field.ComboBox.override({
        onTypeAhead: function() {
            var me = this,
                displayField = me.displayField,
                //record = me.store.findRecord(displayField, me.getRawValue()),
                record = me.store.findRecord(displayField, this.enableRegEx ? new RegExp(me.getRawValue()) : me.getRawValue()),            
                boundList = me.getPicker(),
                newValue, len, selStart;
    
            if (record) {
                newValue = record.get(displayField);
                len = newValue.length;
                selStart = me.getRawValue().length;
    
                boundList.highlightItem(boundList.getNode(record));
    
                if (selStart !== 0 && selStart !== len) {
                    me.setRawValue(newValue);
                    me.selectText(selStart, newValue.length);
                }
            }
        }    
    });
    I asked Sencha about it here:
    http://www.sencha.com/forum/showthre...l=1#post973438

    Also you might need to replace Mode="Local" with QueryMode="Local". It has been renamed since Ext.NET v1.
  4. #4
    The seach or findrecord is case sensitive.

    Here is a screen shot of my complete list:
    Click image for larger version. 

Name:	CompleteList.JPG 
Views:	40 
Size:	21.5 KB 
ID:	6358

    Now when I enter lower case "L" as "l" I expect to see a list of all the names contains "L" irrespective of case, but it only shows those that only contains lower case "L". It is missing "1004 London" in the list. See the screen shot here:
    Click image for larger version. 

Name:	EnteringLowerCaseL.JPG 
Views:	85 
Size:	20.9 KB 
ID:	6359

    How can I make the search/find case insensitive? Here is my most recent code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyCombo.aspx.cs" Inherits="OffLineExtTest.Pages.MyCombo" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
      
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
    
                List<string> cities = new List<string>();
                cities.Add("New York");
                cities.Add("Mumbai");
                cities.Add("Berlin");
                cities.Add("Istanbul");
                cities.Add("London");
                List<Location> LocationList = new List<Location>();
                for (int i = 1; i < 5; i++)
                {
                    var name = cities.ElementAt(i);
                    var location = new Location()
                                      {
                                          LocationKey = 1000+i,
                                          LocationName = 1000 + i+ " " +name
                                      };
                    LocationList.Add(location);
    
                }
                stLocationStore.DataSource = LocationList;
                stLocationStore.DataBind();
            }
    
        }
        public class Location
        {
            public int LocationKey { get; set; }
            public string LocationName { get; set; }
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         <script type="text/javascript">
        Ext.form.field.ComboBox.override({
        onTypeAhead: function() {
            var me = this,
                displayField = me.displayField,
                record = me.store.findRecord(displayField, new RegExp(me.getRawValue()), 0, true, false, false),              
                boundList = me.getPicker(),
                newValue, len, selStart;
           
            if (record) {
                boundList.highlightItem(boundList.getNode(record));
             }
        }   
    });
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:ComboBox ID="cmbLocation" Name="recKey" runat="server" TypeAhead="true" MinChars="1"
            MatchFieldWidth="false" DisplayField="LocationName" ValueField="LocationKey" EmptyText="Select Location"
            Editable="true" ForceSelection="true" AllowBlank="false" AutoSelect="true"
            Width="300" FieldLabel="Location" QueryMode="Local"  EnableRegEx="true">
            <Store>
                <ext:Store ID="stLocationStore" runat="server">
                    <Model>
                        <ext:Model ID="Model4" runat="server" IDProperty="Divnum">
                            <Fields>
                                <ext:ModelField Name="LocationKey" />
                                <ext:ModelField Name="LocationName" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
        </ext:ComboBox>
        </form>
    </body>
    </html>
  5. #5
    Please, add the following overriding:

    Ext.form.field.ComboBox.override({
    	 onTypeAhead: function() {
    		 var me = this,
    			 displayField = me.displayField,
    			 //record = me.store.findRecord(displayField, me.getRawValue()),
    			 record = me.store.findRecord(displayField, this.enableRegEx ? new RegExp(me.getRawValue(), "i") : me.getRawValue()),           
    			 boundList = me.getPicker(),
    			 newValue, len, selStart;
    
    		 if (record) {
    			 newValue = record.get(displayField);
    			 len = newValue.length;
    			 selStart = me.getRawValue().length;
    
    			 boundList.highlightItem(boundList.getNode(record));
    
    			 if (selStart !== 0 && selStart !== len) {
    				 me.setRawValue(newValue);
    				 me.selectText(selStart, newValue.length);
    			 }
    		 }
    	 },
    	 
    	 doLocalQuery: function (queryPlan) {
    		 var me = this,
    			 queryString = queryPlan.query;
    
    		 // Create our filter when first needed
    		 if (!me.queryFilter) {
    			 // Create the filter that we will use during typing to filter the Store
    			 me.queryFilter = new Ext.util.Filter({
    				 id: me.id + '-query-filter',
    				 anyMatch: me.anyMatch,
    				 caseSensitive: me.caseSensitive,
    				 root: 'data',
    				 property: me.displayField
    			 });
    			 me.store.addFilter(me.queryFilter, false);
    		 }
    
    		 // Querying by a string...
    		 if (queryString || !queryPlan.forceAll) {
    			 me.queryFilter.disabled = false;
    			 me.queryFilter.setValue(me.enableRegEx ? new RegExp(queryString, "i") : queryString);
    		 }
    
    			 // If forceAll being used, or no query string, disable the filter
    		 else {
    			 me.queryFilter.disabled = true;
    		 }
    
    		 // Filter the Store according to the updated filter
    		 me.store.filter();
    
    		 // Expand after adjusting the filter unless there are no matches
    		 if (me.store.getCount()) {
    			 me.expand();
    		 } else {
    			 me.collapse();
    		 }
    
    		 me.afterQuery(queryPlan);
    	 }
     });
  6. #6
    Sorry! I have already seen that thread at http://www.sencha.com/forum/archive/...t-257819.html? but wasn't working. So I am posting here for some help.

    I couldn't get it working here at my end. Did it work for you there?
  7. #7
    Quote Originally Posted by Fahd View Post
    I couldn't get it working here at my end. Did it work for you there?
    Your example with the final @Baidaly's override seems to be working as you need, doesn't it?
  8. #8
    It doesn't. Can you paste here the entire code as you have? In my side, doLocalQuery is not even being invoked!!
  9. #9
    Please clarify what Ext.NET version are you using?
  10. #10
    I tried in both Ext version 2.1 and 2.2
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 6
    Last Post: Mar 14, 2013, 11:55 AM
  2. [CLOSED] Autocompletion from filtred store in combobox
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2012, 11:07 AM
  3. Replies: 0
    Last Post: Dec 17, 2011, 9:48 AM
  4. Replies: 5
    Last Post: May 11, 2011, 4:31 AM
  5. Combo Box Item Display
    By ajay.maddinani in forum 1.x Help
    Replies: 1
    Last Post: Oct 12, 2010, 9:55 AM

Posting Permissions