Search Listbox data by Typing on Textbox [Archive]

ramzansadiq

06-25-2009, 02:40 AM

Hi there,

I have a textbox and listbox with data, I want to type in textbox and it should search/point values to listbox,

I have written the same code in VB.net but unable to convert it into JavaScript. My code is as below , I can't use Ajax Listbox extender.

Please help

'Code in ASP-Java Script
Function Search11()
{
sSearchString = document.forms[formName].elements[inputName].value.toUpperCase();
iSearchTextLength = sSearchString.length;

for (j=0; j < document.forms[formName].elements[selectName].options.length; j++)
{
sOptionText = document.forms[formName].elements[selectName].options[j].text;
sOptionComp = sOptionText.substr(0, iSearchTextLength).toUpperCase();

if(sSearchString == sOptionComp)
{
document.forms[formName].elements[selectName].selectedIndex = j;
break;
}
}
}
''**Code in VB.Net

'* Button Click
txtStreetNameAddress.Text = UCase(txtStreetNameAddress.Text)
Dim sSearchString As String = txtStreetNameAddress.Text

Dim iCounter As Integer
For iCounter = 0 To lstStreetsAddress.Items.Count - 1

Dim sListBoxValue As String = lstStreetsAddress.Items(iCounter).Value
Dim sCompare As String = ""
If sSearchString.Length <= sListBoxValue.Length Then
sCompare = sListBoxValue.Substring(0, sSearchString.Length)
End If

If sCompare = txtStreetNameAddress.Text Then

lstStreetsAddress.SelectedIndex = iCounter
Exit For

End If
Next iCounter

''Calling Function
Common.OuputText(txtStreetNameAddress, lstStreetsAddress)

************************************

12 Pack Mack

06-25-2009, 01:30 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var smartOptions = [];
var allOptions = [];
var smartListName = "vipInfo"; // the name of the searched list;
var searchInputName = "vipSearch" // the name of the text input used to search the smart list;

function collectOrigData(nList){

for (i=1; i<nList.length; i++)
{
nList.selectedIndex = i;
allOptions[i-1] = [nList.options[i].text,nList.value];
}
nList.selectedIndex = 0;
}

function buildList(nForm,origData){

for (i=0; i<origData.length; i++)
{
var nOption = document.createElement('option');
nOption.value = origData[i][1];
nOption.appendChild(document.createTextNode(origData[i][0]));
nForm[smartListName].appendChild(nOption);
}
}

function buildSmartOptions(nForm){

var matchStr = nForm[searchInputName].value.toLowerCase();
if (matchStr != "")
{
smartOptions.length = 0;
for (i=0; i<allOptions.length; i++)
{
if (matchStr == allOptions[i][0].substring(0,matchStr.length).toLowerCase())
{
smartOptions[smartOptions.length] = [allOptions[i][0],allOptions[i][1]];
}
}
nForm[smartListName].length = 1;
for (i=0; i<smartOptions.length; i++)
{
buildList(nForm,smartOptions);
}
if (smartOptions.length > 5)
{
nForm[smartListName].size = 6;
}
else {
nForm[smartListName].size = smartOptions.length + 1;
}
}
if (matchStr == "")
{
rebuildOrigList();
}
}

function getChoice(nChoice){

if (nChoice != '')
{
alert(nChoice)
}
}

function rebuildOrigList(){

var nForm = document.forms[0];
nForm[smartListName].options.length = 1;
buildList(nForm,allOptions);
nForm[smartListName].size = 1;
nForm[smartListName].selectedIndex = 0;
}

function init(){

var nForm = document.forms[0];
nForm[smartListName].onchange = function()
{
getChoice(this.value);
}
nForm[searchInputName].focus();
nForm[searchInputName].onkeyup = function()
{
buildSmartOptions(this.form);
}
collectOrigData(nForm[smartListName]);
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

body {background-color:#f0fff0; margin-top:65px; margin-bottom:65px;}

</style>
</head>
<body>
<form action="">

<input type="text" name="vipSearch" size="35">

<br><br>

<select name="vipInfo">
<option selected value="">Make a Selection</option>
<option value="3857">O'Donnell, Patrick</option>
<option value="9543">Babich, Timothy</option>
<option value="5439">Alexander, Allison</option>
<option value="3300">Atwood, James</option>
<option value="7621">Cannon, Edith</option>
<option value="5409">O'Grady, Lisa</option>
<option value="1143">Bailey, Mary</option>
<option value="0085">Conner, Anthony</option>
<option value="1765">Allen, Mike</option>
</select>

</form>
</body>
</html>