PDA

View Full Version : [CLOSED] Combo Box Autocompletion using characters from the middle of the display values



Fahd
Jun 11, 2013, 4:09 PM
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

6346

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>

Baidaly
Jun 12, 2013, 2:02 AM
Hello!

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

Daniil
Jun 12, 2013, 5:42 AM
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/showthread.php?235564&p=973438&viewfull=1#post973438

Also you might need to replace Mode="Local" with QueryMode="Local". It has been renamed since Ext.NET v1.

Fahd
Jun 12, 2013, 8:01 PM
The seach or findrecord is case sensitive.

Here is a screen shot of my complete list:
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:
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>

Baidaly
Jun 12, 2013, 11:31 PM
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);
}
});

Fahd
Jun 13, 2013, 2:56 PM
Sorry! I have already seen that thread at http://www.sencha.com/forum/archive/index.php/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?

Daniil
Jun 13, 2013, 3:13 PM
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?

Fahd
Jun 14, 2013, 1:57 PM
It doesn't. Can you paste here the entire code as you have? In my side, doLocalQuery is not even being invoked!!

Daniil
Jun 14, 2013, 2:04 PM
Please clarify what Ext.NET version are you using?

Fahd
Jun 21, 2013, 5:55 PM
I tried in both Ext version 2.1 and 2.2

Baidaly
Jun 22, 2013, 2:07 AM
Can you try with the last sources from SVN's trunk?

Fahd
Jun 24, 2013, 10:59 PM
Yes. It doesn't work either. The filter is still case sensitive.

Baidaly
Jun 25, 2013, 12:49 AM
Can you try exactly the following sample and confirm it's still case-sensitive on your machine?



<%@ Page Language="C#" %>

<%@ 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, 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);
}
});
</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>