Dec 09, 2019, 8:49 AM
[FIXED] [#1683] Combobox search autocomplete when AnyMatch is enabled
I'm using Ext.Net v.4.8.1.
I want to select the auto completed text and not the selected list item.
How can I achieve that with the AnyMatch="true" functionality still enabled (showing all item that include said query) ?
To select the auto completed text or to sort only the searched list items so that auto completed item is first
would be a perfect solution.
I didn't find anything online specifically about this combination of attributes/actions.
Instructions to reproduce are inside html.
Thank you for your time!
I want to select the auto completed text and not the selected list item.
How can I achieve that with the AnyMatch="true" functionality still enabled (showing all item that include said query) ?
To select the auto completed text or to sort only the searched list items so that auto completed item is first
would be a perfect solution.
I didn't find anything online specifically about this combination of attributes/actions.
Instructions to reproduce are inside html.
Thank you for your time!
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="comboboxSearchTest.aspx.cs" Inherits="WebApplication1.comboboxSearchTest" %>
<script runat="server">
private object TestData
{
get
{
return new object[]
{
new object[] { "AL", "Alabama", "The Heart of Dixie" },
new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
new object[] { "AZ", "Arizona", "The Grand Canyon State" },
new object[] { "AR", "Arkansas", "The Natural State" },
new object[] { "CA", "California", "The Golden State" },
new object[] { "CO", "Colorado", "The Mountain State" },
new object[] { "CT", "Connecticut", "The Constitution State" },
new object[] { "DE", "Delaware", "The First State" },
new object[] { "DC", "District of Columbia", "The Nation's Capital" },
new object[] { "FL", "Florida", "The Sunshine State" },
new object[] { "GA", "Georgia", "The Peach State" },
new object[] { "HI", "Hawaii", "The Aloha State" },
new object[] { "ID", "Idaho", "Famous Potatoes" },
new object[] { "IL", "Illinois", "The Prairie State" },
new object[] { "IN", "Indiana", "The Hospitality State" },
new object[] { "IA", "Iowa", "The Corn State" },
new object[] { "KS", "Kansas", "The Sunflower State" },
new object[] { "KY", "Kentucky", "The Bluegrass State" },
new object[] { "LA", "Louisiana", "The Bayou State" },
new object[] { "ME", "Maine", "The Pine Tree State" },
new object[] { "MD", "Maryland", "Chesapeake State" },
new object[] { "MA", "Massachusetts", "The Spirit of America" },
new object[] { "MI", "Michigan", "Great Lakes State" },
new object[] { "MN", "Minnesota", "North Star State" },
new object[] { "MS", "Mississippi", "Magnolia State" },
new object[] { "MO", "Missouri", "Show Me State" },
new object[] { "MT", "Montana", "Big Sky Country" },
new object[] { "NE", "Nebraska", "Beef State" },
new object[] { "NV", "Nevada", "Silver State" },
new object[] { "NH", "New Hampshire", "Granite State" },
new object[] { "NJ", "New Jersey", "Garden State" },
new object[] { "NM", "New Mexico", "Land of Enchantment" },
new object[] { "NY", "New York", "Empire State" },
new object[] { "NC", "North Carolina", "First in Freedom" },
new object[] { "ND", "North Dakota", "Peace Garden State" },
new object[] { "OH", "Ohio", "The Heart of it All" },
new object[] { "OK", "Oklahoma", "Oklahoma is OK" },
new object[] { "OR", "Oregon", "Pacific Wonderland" },
new object[] { "PA", "Pennsylvania", "Keystone State" },
new object[] { "RI", "Rhode Island", "Ocean State" },
new object[] { "SC", "South Carolina", "Nothing Could be Finer" },
new object[] { "SD", "South Dakota", "Great Faces, Great Places" },
new object[] { "TN", "Tennessee", "Volunteer State" },
new object[] { "TX", "Texas", "Lone Star State" },
new object[] { "UT", "Utah", "Salt Lake State" },
new object[] { "VT", "Vermont", "Green Mountain State" },
new object[] { "VA", "Virginia", "Mother of States" },
new object[] { "WA", "Washington", "Green Tree State" },
new object[] { "WV", "West Virginia", "Mountain State" },
new object[] { "WI", "Wisconsin", "America's Dairyland" },
new object[] { "WY", "Wyoming", "Like No Place on Earth" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Combo Boxes - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.example {
width: 600px;
border: 1px solid #CCC;
padding: 0px 10px 10px 10px;
margin: 0 0 10px;
}
#transformCombo label {
display: block;
margin: 1em 0 2px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ObjectHolder ID="DataHolder" runat="server" />
<h1>Combo Boxes</h1>
<div class="example">
<p>INSTRUCTIONS TO REPRODUCE:</p><br>
<p>1) Write 'mo' in field -> it autocompletes to 'Mother of States', but is selects 'The Mountain State' list item</p>
<p>2) Press TAB button and it goes with the selected list item</p>
<br>
<p>Desired outcome is to select the autocompleted text and not the selected list item. </p>
<p>How can I achieve that with the AnyMatch="true" functionality still enabled (showing all item that include said query) ? </p>
<br>
<ext:ComboBox
runat="server"
FieldLabel="Select a single state"
DisplayField="slogan"
Width="320"
LabelWidth="130"
ForceSelection="true"
QueryMode="Local"
TypeAhead="true"
AnyMatch="true">
<Store>
<ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="name" />
<ext:ModelField Name="slogan" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
</div>
</form>
</body>
</html>
Last edited by fabricio.murta; Jan 22, 2020 at 7:24 PM.