Dynamic dropdown list for sending messages to multiple members

[coffeejunkie]

I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that.

Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly.

Any help is greatly appreciated. thank you

[xelawho]

I think it's called an autocomplete, the thing you are looking for. jQuery has one that is somewhat simple to implement:

http://docs.jquery.com/UI/Autocomplete

although you will have to tweak it to accept multiple selections.

the other thing is that you can modify a dropdown list to highlight multiple options by clicking the option while holding down ctrl

<select multiple="yes">
<option>me</option>
<option>you</option>
<option>him</option>
</select>

[coffeejunkie]

I think it's called an autocomplete, the thing you are looking for. jQuery has one that is somewhat simple to implement:

http://docs.jquery.com/UI/Autocomplete

although you will have to tweak it to accept multiple selections.

the other thing is that you can modify a dropdown list to highlight multiple options by clicking the option while holding down ctrl

<select multiple="yes">
<option>me</option>
<option>you</option>
<option>him</option>
</select>

Thank you so much, that worked great. you wouldn't happen to know how to add your own list to that source? i have a list called MessageModel.MemberNameSelectList() but javascript and mvc are not communicating for me

[xelawho]

Thank you so much, that worked great. you wouldn't happen to know how to add your own list to that source? i have a list called MessageModel.MemberNameSelectList() but javascript and mvc are not communicating for me

mmm... which approach are you using? if it is the jQuery one, the simple answer would be by plugging the array into the source: option. I don't really know anything about jQuery and know nothing about mvc - maybe that question would be better asked in the jQuery forum?

if it is the select list approach you can dynamically add options to a select list doing something like this:

js:

for (var k=0; k<dropdowns.length; k++) {
var optn = document.createElement("OPTION");
optn.text = dropdowns[k];
document.myform.selectlist.options.add(optn);
}

html:
<form name="myform"><select id="selectlist" multiple="yes"><option>select an option</option></select></form>

where dropdowns is the name of the array where you have your names stored