I have a problem in the project am working on...

i have a listbox and a textbox in the page.. the listbox is populated with all the values for the customer names in the databases.

now based on the value entered in textbox the record matching (first record matching) will be highlighted in the list box.

pls note the listbox will always have all the records in it but only the focus will be shifted to the subset of it

i am using visual studio 2003 and so far no ajax in the project. Do not want to change the existing solution much

hope to see the help soon

Try

        for (int i = 0; i < ListBox1.Items.Count; i++)
        {
            if (ListBox1.Items[i].Text == TextBox1.Text.Trim())
            {
                ListBox1.Items[i].Selected = true;
            }
        }

Rather than looping through each item in your list collection, the listBox (and dropdownlist) have built-in methods.  Here are two examples

 

            ListBox1.Items.FindByText(TextBox1.Text).Selected = true;
            ListBox1.Items.FindByValue(TextBox1.Text).Selected = true;

 

so does that mean i need to set AutoPostback for the textbox to True or is there any other way of doing this in script.

Autopost back true may cause the page to refresh quite often as user can keep entering the input

you can trigger it with TextChanged, but it will only fire when tabbing off.  or you create a button for SEARCH! or something. put an AJAX update panel around your controls, and your users won't notice so much, the postback.

I have worked with javascript in the past which really was speedy, but I never did learn the DOM, so dont remember how I did it. it was a clientside event for the textbox (like OnChange), and it worked for each character entered into the textbox. I will see if I can find my original source code.

<input type="text" name="T1" onchange="DoSomething()"> <!-- calls the javascript DoSomething() method for each character typed -->

Thanks for helping out...well as i said would like if no ajax is involved in the page for the simple reason that its an existing application and not using any ajax till date

so using update panel is out of question for this. i guess we need to find a way to set the listbox selected value from javascript and that function has to called from onchange event of the textbox.

not sure if that will work or not thou or if its possible..

ankit1407:

i guess we need to find a way to set the listbox selected value from javascript and that function has to called from onchange event of the textbox.

not sure if that will work or not thou or if its possible..

See my sample below 

<script type="text/javascript" language="javascript">    

function loopList()
{
        var l =  document.getElementById('<%= ListBox1.ClientID %>');
        var tb = document.getElementById('<%= TextBox1.ClientID %>');
        for (var i=0; i < l.options.length; i++)
        {
            if (l.options[i].value == tb.value)
            {
                l.options[i].selected = true;
            }
        }
}
   
</script>

 <asp:TextBox ID="TextBox1" runat="server"  onkeyup="loopList();"></asp:TextBox> 

Thanks will certainly give it a try but looking at the code samples i have one doubt... this is more or less looks like an exact search..like the text box value has to match the listbox value for this to work while the idea was if i enter Ab , all the accounts starting with there name Ab(first one )should be focused.. so its a like more of a wild card search....is this possible here ?

thanks for all the help...i tried something like this a bit different from your but same concept i guess

function selectUser()

{

 

var sel = document.form1.ListBox1; // Get the listbox items

var sFind = document.form1.<%=TextBox1.ClientID%>.value; // Get the text entered into the textbox

var strLength = sFind.length; // Get the length of the string entered into the textbox

var i;for(i =0; i<sel.options.length; i++)

{

var str = sel.options[i].text;

//alert(str);

if((str.substring(0,strLength)).toUpperCase() == sFind.toUpperCase())

//Substring because we need to take each character and find the closet match

{

sel.selectedIndex = i;

i = sel.options.length + 2; //Need to use this to get out of the loop as soon as first match is found

//alert(sel.options.length);

}

}

}

ASPX Page

<asp:TextBox ID="TextBox1" runat="server" onkeyup="selectUser();" ></asp:TextBox><br />

<asp:ListBox ID="ListBox1" runat="server" Height="139px" SelectionMode="Multiple"

Width="346px"></asp:ListBox>

this seems to work quite ok...couple of questions in mind thou

1. is there anyway of avoiding the loop..as i am returning close to 2000 records in Listbox.. i remember another friend mentioning

findbyvalue kind of property but could not get it to work in java script.

2. Once i enter a characte in middile of someinput like for eg input is 1234 than the system is able to search for the match and set the focus.

but if i enter something in between by placing the cursor like 12534 , the system does not search for the proper value even thou record exist in the listbox.

not sure anything to do with event not firing...

Any help pls?

ankit1407:

1. is there anyway of avoiding the loop..as i am returning close to 2000 records in Listbox.. i remember another friend mentioning

findbyvalue kind of property but could not get it to work in java script.

2. Once i enter a characte in middile of someinput like for eg input is 1234 than the system is able to search for the match and set the focus.

but if i enter something in between by placing the cursor like 12534 , the system does not search for the proper value even thou record exist in the listbox.

not sure anything to do with event not firing...

Any help pls?

Hi ankit1407,

To solve the first problem, you could change the code "var i;" to "var i = sel.selectedIndex;". It helps the record to be located faster.

To solve the second problem, I suggest you to make the cursor placing forbidden in TextBox. Here is an example: 

<script type="text/javascript">
function moveToEnd()   
{   
    var rng=document.selection.createRange();     
    rng.moveStart("character",200);     
    rng.select();     
} 
</script>

<asp:TextBox ID="TextBox1" runat="server" onkeyup="selectUser();" onclick="moveToEnd()"></asp:TextBox>

Hope the information helps.

Best Regards,
Shengqing Yang

 

hey thanks brother this function really helped me.

i put break statement if item found

else it will display a error meesage

 thanks again,

 krishna

Thanks alot for your hint, i was looking for the same and its solved now.

Thanks alot for the hint, i was looking for the same and it's solved now.

Regards,

Hamzeh Ayesh

Thanks for the solution.