Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You should actually be attaching the autocomplete behaviour to your text box. </p> <p>That said, the autocomplete version included in the jQuery library isn't totally straightforward if you ask me.</p> <pre><code>$("input#user").autocomplete({ source: function (request, response) { // define a function to call your Action (assuming UserController) $.ajax({ url: '/user/GetUsers', type: "POST", dataType: "json", // query will be the param used by your action method data: { query: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item, value: item }; })) } }) }, minLength: 1, // require at least one character from the user }); </code></pre> <p>In your controller, define the following Action</p> <pre><code>public ActionResult GetUsers(string query) { var users = (from u in User.LoadSortedByName() where u.Name.StartsWith(query) orderby u.Name // optional but it'll look nicer select u.Name).Distinct().ToArray(); return Json(users); } </code></pre> <p>This implementation will not allow multiple values on your textbox; for examples on how to do that check the <a href="http://jqueryui.com/demos/autocomplete/" rel="nofollow noreferrer">jQuery autocomplete examples</a></p> <p><strong>UPDATE based on final resolution</strong> </p> <p>Make sure you have a reference to the jQuery UI Core.</p> <p>From the Microsoft CDN: </p> <pre><code>&lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;` </code></pre> <p>From the Google CDN: </p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt; </code></pre> <p>Or download it yourself from the <a href="http://jqueryui.com/download" rel="nofollow noreferrer">official jQuery UI Page</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload