ASP.NET

7-Aug-07 19:54

Hi all,

There is a small requirement in drop down list. Suppose I have bounded the employee names to the drop down list. Now I am searching for a name “Peter”. So if I press ‘p’ and then ‘e’ it should go to Peter’s name. But it goes to Elizabeth’s name. Is there any solution for that? Could anyone of you please help me on that? I am using .Net version 2.0

Thanks and Regards,
Hariharan C

Christian Graus7-Aug-07 20:09

Christian Graus

7-Aug-07 20:09

It always goes based on the first key you pressed, there are probably custom controls out there that do what you want, but the standard one, does not

Christian Graus - Microsoft MVP - C++

"I am working on a project that will convert a FORTRAN code to corresponding C++ code.I am not aware of FORTRAN syntax" ( spotted in the C++/CLI forum )

Hari_10107-Aug-07 20:12

7-Aug-07 20:12

So if there is any custom controls you can help me.

Thanks and Regards,
Hariharan C

Michael Sync7-Aug-07 20:11

7-Aug-07 20:11

I suggest you to use Ajax AutoComplete (something like Google suggest) instead of using dropdown list.
eg:

Creating a Textbox with JavaScript Auto-Complete[^]

http://www.codeproject.com/aspnet/AJAXWasHere-Part3.asp[^]

Thanks and Regards,
Michael Sync ( Blog: http://michaelsync.net)

If you want to thank me for my help, please vote my message by clicking one of numbers beside "Rate this message". Why vote? Plz Read it here. Thank you.

Hari_10107-Aug-07 20:16

7-Aug-07 20:16

Hi Michael,

I know there is a solution in Ajax. But if i select Ajax, then i will find difficult to implement in my project. So is there any solution without using Ajax.

Thanks and Regards,
Hariharan C

Christian Graus7-Aug-07 20:33

Christian Graus

7-Aug-07 20:33

AJAX is just javascript. The odds of there being a non js solution are close to zero.

Christian Graus - Microsoft MVP - C++

"I am working on a project that will convert a FORTRAN code to corresponding C++ code.I am not aware of FORTRAN syntax" ( spotted in the C++/CLI forum )

Michael Sync7-Aug-07 22:15

7-Aug-07 22:15

Have you tested in Firefox (latest version)? It works well as the way you want without changing anything. but it doesn't work in IE6.

I'm looking for the solution for you.. I will let you know once done.

Hari_10107-Aug-07 22:21

7-Aug-07 22:21

Hi Michael,

I dont have firefox in my system. Thanks for your help michael. Let me know if you find the solution for me.

Thanks and Regards,
Hariharan C

Hari_10108-Aug-07 1:52

8-Aug-07 1:52

Hi Michael,

Yes its working fine in firefox. But its there any other way to make it work in IE. If you got the solution let me know it.

Thanks and Regards,
Hariharan C

Michael Sync8-Aug-07 7:42

8-Aug-07 7:42

Hello Hariharan,

I just arrive at home and I remember your question that I don't have enough time to figure out the solution.. So, I opened my page and I'm trying to reproduce this issue. Now, I have tested with Internet Explorer 7, Firefox 2.0.0.6, Opera 9.2 and Safari 3.0.3. It is working fine in all those browsers except internet explorer 6. I don't have this one in my laptop. I tried to install IE6 standalone version that can run with IE7 on same machine but that installer doesn't work on Windows Vista. Frown | :(

Anyway, I'm gonna give you some codes that I think it should work on IE6.

<script language="javascript" type="text/javascript"><br />
      var pressedKeyString = "";<br />
      var delay = 1000;<br />
      var timeID = null;<br />
      function move(id){<br />
        <br />
        var selectList = document.getElementById(id);<br />
        var arr = new Array();<br />
        <br />
        var idx = 0;<br />
        <br />
        for(var i = 0; i < selectList.options.length-1; i++){           <br />
           if(selectList.options[i].value.length >= pressedKeyString.length){<br />
             if(pressedKeyString.toLowerCase() == selectList.options[i].value.substring(0,pressedKeyString.length).toLowerCase()){<br />
                 selectList.options[i].select = true;                                  <br />
                 i=selectList.options.length;                                  <br />
             }<br />
           }                      <br />
        }<br />
        <br />
        //pressedKeyString = "";<br />
      }<br />
      <br />
      function foo(e,id){<br />
        if(timeID != null)clearTimeout(timeID);<br />
        timeID = setTimeout("move('" + id + "');",delay);<br />
        <br />
        var key;<br />
        if(window.event) // IE<br />
        {<br />
           key = e.keyCode<br />
        }<br />
        else if(e.which) // Netscape/Firefox/Opera<br />
        {<br />
           key = e.which<br />
        }        <br />
        <br />
        var pressKey = String.fromCharCode(key);<br />
        pressedKeyString += pressKey;           <br />
        <br />
      }<br />
      <br />
    </script>

 protected void Page_Load(object sender, EventArgs e)<br />
    {<br />
        DropDownList1.Attributes.Add("onkeypress", "foo(event,'" + DropDownList1.ClientID + "');");<br />
<br />
        List<string> list = new List<string>();<br />
        list.Add("Alien");<br />
        list.Add("Emos");<br />
        list.Add("Poker");<br />
        list.Add("Peter");<br />
        list.Add("Michael Sync");<br />
        list.Add("Petro");<br />
        list.Add("Pet");<br />
        list.Add("Elizabeth");<br />
<br />
        DropDownList1.DataSource = list;<br />
        DropDownList1.DataBind();<br />
    }

The main idea of this code is that we will enable the timer to check whether the user is still typing or not. The timer will get clear as long as the user keep on typing. If the user stop then the timer will count 1000 minisecound and will invoke the Move function. In that function, we will do some string comparison to find whether there is any item which is started with the string that the user type or not. If we found the matched string then we will make this item as a selected item..

this is the idea. I'm not so sure whether it gonna work without error or not since I haven't tested yet and I don't have IE6 installed in my machine. For the time being, you can do some modifications to this code if you interest the idea. I will test my script for you tomorrow because the machine from my office has IE6 installed.

Anyway, what I like to suggest you is that if the particular thing works on main browsers except IE6, you should not spend so much time for finding the solution ...

Hari_10108-Aug-07 20:49

8-Aug-07 20:49

Hi Michael,

I have checked your code, its not working in IE6. There is a small doubt, is there 'onkeypress' event for Dropdownlist.

Thanks and Regards,
Hariharan C

Hari_10108-Aug-07 23:50

8-Aug-07 23:50

Hi Michael,

Have you got the solution for me. I am not able to get it. So if you got the solution let me know please.

Thanks and Regards,
Hariharan C

Michael Sync9-Aug-07 15:28

9-Aug-07 15:28

Hello Hariharan,

Sorry for late reply. Yesterday was a holiday (Birthday of S'pore[^])

I have tested my code that I gave you earlier. There is only thing that we need to change in my code.

We should use selectedIndex selectList.selectedIndex = 2; instead of selectList.options[i].select = true;

The completed code is as below ~

<script language="javascript" type="text/javascript"><br />
      var pressedKeyString = "";<br />
      var delay = 1000;<br />
      var timeID = null;<br />
      function move(){<br />
        <br />
        var selectList = document.getElementById('DropDownList1');<br />
        var arr = new Array();<br />
        <br />
        var idx = 0;<br />
        <br />
        for(var i = 0; i < selectList.options.length-1; i++){           <br />
           if(selectList.options[i].value.length >= pressedKeyString.length){<br />
             if(pressedKeyString.toLowerCase() == selectList.options[i].value.substring(0,pressedKeyString.length).toLowerCase()){                              <br />
                 selectList.selectedIndex = i;<br />
                 i=selectList.options.length;                                  <br />
                 alert(pressedKeyString);<br />
             }<br />
           }                      <br />
        }<br />
        <br />
        pressedKeyString = "";<br />
      }<br />
      <br />
      function foo(e,id){<br />
        if(timeID != null)clearTimeout(timeID);<br />
        timeID = setTimeout("move();",delay);<br />
        <br />
        var key;<br />
        if(window.event) // IE<br />
        {<br />
           key = e.keyCode<br />
        }<br />
        else if(e.which) // Netscape/Firefox/Opera<br />
        {<br />
           key = e.which<br />
        }        <br />
        <br />
        var pressKey = String.fromCharCode(key);<br />
        pressedKeyString += pressKey;<br />
        <br />
        <br />
        <br />
      }<br />
    </script>

Note that "onkeypress" event is a javascript event (not server-side event).

As I mentioned my idea, the character that you typed will keep on appending to the string called pressedKeyString. (while you are typing, the select list will be changed by default. (this is what we don't want)). After finished typing (timer will count to 1000 minisecound), then the dropdown list will be changed to the option which is matched with the characters that you enter. (eg: if you type "pe" then dropdown list will select to "Peter".)

Hope it helps. Let me know whether it works for you or not..

Hari_10109-Aug-07 18:38

9-Aug-07 18:38

Hi Michael,

Ya its working fine for me. Thanks a lot for your kind help. But again there is one small problem. When i type 'pe' it goes to 'Peter'. After that when i do it for the second time, its not working.(i.e After i typed 'pe', I wait for 1000 ms for the dropdownlist to select 'peter'. That's fine. Then I typed 'Ki', the dropdownlist has not select the name 'Kiran'. It selects "Indhu"). Have you checked that. If you know the answer let me know.
Else again thanks a lot for your kind help.

Thanks and Regards,
Hariharan C

Michael Sync9-Aug-07 20:01

9-Aug-07 20:01

I have tried that. It works.

Hari_1010 wrote:
(i.e After i typed 'pe', I wait for 1000 ms for the dropdownlist to select 'peter'. That's fine. Then I typed 'Ki', the dropdownlist has not select the name 'Kiran'. It selects "Indhu").

Did you wait for 1000 ms after typing 'Ki'?

I have tested with the following data..

DropDownList1.Attributes.Add("onkeypress", "foo(event,'" + DropDownList1.ClientID + "');");<br />
<br />
        List<string> list = new List<string>();<br />
        list.Add("Alien");<br />
        list.Add("Emos");<br />
        list.Add("Emos2");<br />
        list.Add("Poker");<br />
        list.Add("Peter");<br />
        list.Add("Michael Sync");<br />
        list.Add("Petro");<br />
        list.Add("Pet");<br />
        list.Add("Elizabeth");<br />
        list.Add("Kiran");<br />
        list.Add("Kate BackInSales");<br />
<br />
        DropDownList1.DataSource = list;<br />
        DropDownList1.DataBind()

I tried three times. ('Pe', 'Ki', 'Em'). It works fine.. Please try it again and let me know..

Note: you have to wait 1000 ms every time after typing something...

Hari_10109-Aug-07 20:21

9-Aug-07 20:21

Hi Michael,

I checked it again. For me its working fine for the first time only. Anyway Michael thanks a lot for your help.

Thanks and Regards,
Hariharan C

You forget to uncomment

Michael Sync10-Aug-07 8:30

10-Aug-07 8:30

Hi Hariharan,

I think that you didn't check the code that I give you second time. I have uncommented the pressedString = ""; in move function..

You may also check this ASP.NET: DropDown List problem with IE6[^]

Hari_101012-Aug-07 18:12

12-Aug-07 18:12

Hi Michael,

Very good morning. I just saw your reply after the weekend.

You are correct. Yes i forget to uncomment the code. Now its working fine. Thanks a lot man. This is going to be very useful for me.

Thanks and Regards,
Hariharan

Hari_101012-Aug-07 19:06

12-Aug-07 19:06

Hi Michael,

Now I have added one more dropdownlist and bound to the object data source(says Employee name). Then I tried to call your script, where its not working. Can you please tell me what I have to do now.

Thanks and Regards,
Hariharan C

Michael Sync12-Aug-07 19:45

12-Aug-07 19:45

Hi Hariharan,

It's good to hear that. If my script works for you, don't forget to vote my message. Smile | :)

thanks.

Instead of using static name "DropDownList1", you should probably pass this name as the parameter. so, it will work if you have more than one dropdown.

var selectList = document.getElementById('DropDownList1');

This variable holds only one value. maybe. you can add more variables. or you can handle this variable to hold the value depend on what the user is typing.

var pressedKeyString = "";

Hope it helps.

Hari_101012-Aug-07 19:58