This is a migrated thread and some comments may be shown as answers.

Auto create tokens from typed text

2 Answers 34 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 21 Mar 2019, 12:17 PM

On a website I have a search page where the user will type in key=value pairs.  For example, "Software=SQL" would be a token.  I have the auto complete showing the options as they type.  I want to see if I can via the web service make two tokens as the user types in "software=SQL software=windows"  (Token 1 = "software=SQL" and Token 2="software=windows").  I know they can select from the drop down box to get the token, but I would like to be able to "token" the string as the user types in the string without them needing to select the item from the drop down box.  As the user types in "software=SQL software=windows"  the UI would show a token for "software=SQL" and a 2nd token for "software=windows".  The web service (i.e. server side) will handle the logic to determine on breaking the typed in string into the respective tokens

2 Answers, 1 is accepted

Sort by
0
Scott
Top achievements
Rank 1
answered on 21 Mar 2019, 12:48 PM

It would be great that as the user types in "SQL" and the web method sees "SQL" as software can create a token that looks like "software=sql".  Is it possible to take the typed in value and add additional text and token it. 

User types in "SQL" and the text box will show "Software=SQL"

0
Peter Milchev
Telerik team
answered on 26 Mar 2019, 08:56 AM
Hello Scott,

You can set the AllowCustomEntry to true and HighlightFirstMatch to false, then use the OnEntryAdded server-side event to modify the added entry. You can also use the event to add custom entries. Here is a simple example that implements the suggested approach.



<telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox1" runat="server" Width="400" DropDownHeight="150"
    EmptyMessage="Select Continents" HighlightFirstMatch="false" AllowCustomEntry="true" OnEntryAdded="RadAutoCompleteBox1_EntryAdded">
</telerik:RadAutoCompleteBox>

protected void Page_Load(object sender, EventArgs e)
{
    RadAutoCompleteBox1.DataSource = new List<string>() { "Europe", "America", "Asia", "Africa", "Australia" };
}
 
protected void RadAutoCompleteBox1_EntryAdded(object sender, Telerik.Web.UI.AutoCompleteEntryEventArgs e)
{
    var autocomplete = sender as RadAutoCompleteBox;
    e.Entry.Text = "software=SQL";
    autocomplete.Entries.Add(new AutoCompleteBoxEntry("Custom added Entry"));
}

Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
AutoCompleteBox
Asked by
Scott
Top achievements
Rank 1
Answers by
Scott
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or