My Blog: Forcing the user to select an item from ajax suggest box using JQuery

Tuesday, March 15, 2011

Forcing the user to select an item from ajax suggest box using JQuery

Suggest boxes (Type Ahead box) are a great way to display a list of data from database or any other resource from a server in a text box.

There might be requirement at times to force the users to select from the items displayed in suggest box list and not allow them to enter anything other than the list displayed.

This can be done easily using JQuery. JQuery has a parameter named mustMatch which should be set to true. By default mustMatch is set to false. Here is an example.

$("#sampleSuggest").autocomplete("Server_URL",
{
minChars: 3,
max: 10,
multiple: true,
multipleSeparator: "\n",
mustMatch: true,
matchContains: true,
scrollHeight: 220,
}

mustMatch saved my day. I hope it saves someone else's day.

1 comment:

Anonymous said...: We are using the same in IE8 and having a problem with the handleOptionListChanged function in UCM 11g.
This works in 10g

function handleOptionListChanged(e)
{
if (!e) var e = window.event;
bInDropdown = false;
if (handlingOptionListEvent > 0)
{
handlingOptionListEvent--;
}
else
{
var myParam = e.srcElement || e.currentTarget;
doChangeCommand(myParam.id);
}
}

But not in 11. Any idea?; July 28, 2011 at 8:17 PM