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

[Solved] Autocomplete Listbox

4 Answers 367 Views

ListBox

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

Ramesh kumar Kuppusamy asked on 22 Aug 2011, 04:07 PM

In my application I have the auto complete like textbox option with Listbox. If I type a word in the text box it should select appropriate list item in the list box. And also if select a list box item, the selected value to be reflected in the text box.

Here everything is working fine except that if I key on the some filter character, the typed characters are repeating twise in the textbox.

And Keyboard navigation is not working for Up/Down arrow keys after the user keyed in the textbox.

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

Search:

<telerik:RadTextBox ID="RadTextBox1"

ClientEvents-OnKeyPress="filterListBox" SelectionOnFocus="SelectAll"runat="server">

</telerik:RadTextBox>

<telerik:RadListBox ID="RadListBox1" runat="server" Sort="Ascending"

OnClientSelectedIndexChanged

="GetProgramName" >

<Items>

<telerik:RadListBoxItem

Text="Kansas"

Value="KS" />

<telerik:RadListBoxItem

Text="Kentucky"

Value="KY" />

<telerik:RadListBoxItem

Text="Texas"

Value="TX" />

<telerik:RadListBoxItem

Text="Missouri"

Value="MO" />

<telerik:RadListBoxItem

Text="Nebraska"

Value="NE" />

<telerik:RadListBoxItem

Text="Neubraska"

Value="N1E" />

<telerik:RadListBoxItem

Text="New Mexico"

Value="NM" />

<telerik:RadListBoxItem

Text="Oklahoma"

Value="OK" />

<telerik:RadListBoxItem

Text="Arizona"

Value="AZ" />

<telerik:RadListBoxItem

Text="South Dakota"

Value="SD" />

<telerik:RadListBoxItem

Text="Colorado"

Value="CO" />

<telerik:RadListBoxItem

Text="Iowa"

Value="IA" />

<telerik:RadListBoxItem

Text="Illinois"

Value="IL" />

</Items>

</telerik:RadListBox>

</div>

<script type="text/javascript">

function

filterListBox(sender, e) {

var list = $find("ctl00_Content_lstSelectPgm");

var searchText = sender.get_value() + e.get_keyCharacter();

var items = list.get_items();

for (var i = 0; i < items.get_count(); i++) {

var item = items.getItem(i);

var SelectPrgm;

if (item.get_text().toLowerCase().startsWith(searchText.toLowerCase())) {

item.select();

item.ensureVisible();

item.scrollIntoView;

SelectPrgm = $find(

"ctl00_Content_txtSelectPgm")

SelectPrgm.set_value();

SelectPrgm.set_value(searchText);

break;

}

 

function
 
GetProgramName(sender, args) {
 
 
var SelectPrgm;
 
SelectPrgm = $find(
"ctl00_Content_txtSelectPgm")
 
SelectPrgm.set_value(
'');
 
SelectPrgm.set_value(sender.get_selectedItem().get_value())
document.getElementById(
"ctl00_Content_cmdOk").disabled = false;
 
document.getElementById(
"ctl00_Content_txtSelectPgm")
 
}

</script>

</form>

</body>

4 Answers, 1 is accepted

answered on 24 Aug 2011, 04:48 PM

Hi Ramesh,

I tried your sample code and there are some missing elements and it is not possible to run it. Please send me a working sample project to investigate it locally.

In case that you want to use keyboard navigation make sure you have the TabIndex property set beforehand. For additional information please consult with the following demo.

All the best,
Peter Filipov
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 24 Aug 2011, 05:44 PM

Hi Peter

I have attached the working sample code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 runat="server">

<title>ListBox Filter Starter Project</title>

<style type="text/css">

div.notes

{

color: Red;

font-family: "Segoe UI" , Arial;

margin-bottom: 20px;

}

.RadListBox span.rlbText em

{

background-color: #E5E5E5;

font-weight: bold;

font-style: normal;

}

</style>

<script type="text/javascript">

function filterListBox(sender, e) {

var list = $find("RadListBox1");

var searchText = sender.get_value() + e.get_keyCharacter();

var items = list.get_items();

for (var i = 0; i < items.get_count(); i++) {

var item = items.getItem(i);

var SelectPrgm;

if (item.get_text().toLowerCase().startsWith(searchText.toLowerCase())) {

item.select();

item.ensureVisible();

item.scrollIntoView;

SelectPrgm = $find("RadTextBox1")

SelectPrgm.set_value();

SelectPrgm.set_value(searchText);

break;

}

function GetProgramName(sender, args) {

var SelectPrgm;

SelectPrgm = $find("RadTextBox1")

SelectPrgm.set_value('');

SelectPrgm.set_value(sender.get_selectedItem().get_value())

document.getElementById("RadTextBox1")

}

</script>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

Search:

<telerik:RadTextBox ID="RadTextBox1" ClientEvents-OnKeyPress="filterListBox" SelectionOnFocus="SelectAll"

runat="server">

</telerik:RadTextBox>

<telerik:RadListBox ID="RadListBox1" runat="server" Sort="Ascending" OnClientSelectedIndexChanged="GetProgramName">

<Items>

<telerik:RadListBoxItem Text="Kansas" Value="KS" />

<telerik:RadListBoxItem Text="Kentucky" Value="KY" />

<telerik:RadListBoxItem Text="Texas" Value="TX" />

<telerik:RadListBoxItem Text="Missouri" Value="MO" />

<telerik:RadListBoxItem Text="Nebraska" Value="NE" />

<telerik:RadListBoxItem Text="Neubraska" Value="N1E" />

<telerik:RadListBoxItem Text="New Mexico" Value="NM" />

<telerik:RadListBoxItem Text="Oklahoma" Value="OK" />

<telerik:RadListBoxItem Text="Arizona" Value="AZ" />

<telerik:RadListBoxItem Text="South Dakota" Value="SD" />

<telerik:RadListBoxItem Text="Colorado" Value="CO" />

<telerik:RadListBoxItem Text="Iowa" Value="IA" />

<telerik:RadListBoxItem Text="Illinois" Value="IL" />

</Items>

</telerik:RadListBox>

</div>

</form>

</body>

</html>

answered on 29 Aug 2011, 12:31 PM

Search.zip

Hello Ramesh,

Please review the attached project.

Greetings,
Peter Filipov
the Telerik team