Autocomplete needs an url, controller or data function (js func) to get data from, by default convention it will look for a controller with the same name as it + "Autocomplete"

  • action GetItems - gets the items for the autocomplete, it will receive a v parameter which represents the value of the textbox
   Meal: <% Meal.Autocomplete()
.Placeholder("try o"); %>
<awe:Ocon runat="server" ID="Meal" />
public class MealAutocompleteController : Controller
public ActionResult GetItems(string v)// v is the entered text
v = (v ?? "").ToLower().Trim();

var items = Db.Meals.Where(o => o.Name.ToLower().Contains(v));

return Json(items.Take(10).Select(o => new KeyContent(o.Id, o.Name)));

Custom Item rendering


Achieving custom item rendering by setting ItemFunc, we're reusing the site.imgItem used by the imgDropdown but any js function that receives an object (KeyContent inheritant MealDisplay) and returns a string will do.
   Meal: <% MealImgIt.Autocomplete()
.Url(Page.Url().Action("GetMealsImgAutoc", "Data"))
.Placeholder("try o"); %>
<awe:Ocon runat="server" ID="MealImgIt" />
public ActionResult GetMealsImgAutoc(string v)
v = (v ?? string.Empty).ToLower();
var url = Url.Content(DemoUtils.MealsUrl);
var items = Db.Meals
.Where(o => o.Name.ToLower().Contains(v))
.Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg"));

return Json(items);

Storing selected value key in a separate field using .PropId

you can (should) use hidden input instead

when the user selects a value from the autocomplete lists the PropId will be assigned the key of the selected value, but if the user will type something into the autocomlete after that the propId value will clear
<div class="efield">
<div class="elabel">
<% Meal3.Autocomplete().PropId(MealKey.ClientID).Controller<MealAutocompleteController>(); %>
<awe:Ocon runat="server" ID="Meal3" />
<div class="efield">
<div class="elabel">Key:</div>
<% MealKey.TextBox(); %>
<awe:Ocon runat="server" ID="MealKey" />
<div class="awe-il">you can (should) use hidden input instead</div>

Using DataFunc and ItemFunc

git repo:

using DataFunc to get data from github api, ItemFunc is used to set a custom js function that will render the item
   git repo: <% Repo.Autocomplete()
.ItemFunc("site.gitItem"); %>
<awe:Ocon runat="server" ID="Repo" />
function getGit(v) {
return $.get('', { q: v })
.then(function (data) {
return $.map(data.items,
function (item) {
return { k:, c: item.full_name, avatar: item.owner.avatar_url, desc: item.description };

Bound to parents

Parent Categories:
Child Meal:
autcomplete list limited to categories selected in the parent

Numeric autocomplete

Prime number:

Using predefined parameters

Meal2 (parent = Fruits, Legumes, Vegetables):