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.