Using jQuery autofill difficulty

I use jquery autocomplete, but have a dificulty to load autocomplete into a text box

My model is as follows:

Users = new List<string>(); foreach (var item in User.LoadSortedByName()) { Users.Add(item.Name+"\n"); } 

View:

 <p>@Html.TextBox("user", "") $(function () { $("input#user").autocomplete('@Model.Users'); }); 

UPDATE - SIMPLIFIED ATTEMPT AND WITHOUT WORK

_layout

 <script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> View <p><input type="text" id="tags" /></p> <script type="text/javascript"> $(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); 
+6
jquery asp.net-mvc-3 jquery-autocomplete
source share
3 answers

In fact, you have to bind autocomplete behavior to a text field.

However, the autocomplete version included in the jQuery library is not quite simple if you ask me.

 $("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 }); 

In your controller, define the following action

 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); } 

This implementation will not allow multiple values ​​to be used in your text field; for an example on how to do this, check out jQuery autocomplete examples

UPDATE based on final permission

Make sure you have a reference to the jQuery UI kernel.

From Microsoft CDN:

 <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>` 

From the Google CDN:

 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script> 

Or download it directly from the official jQuery user interface page

+16
source share

I designed the html extension as a plugin to use jquery ui autocomplete, but in a very simple and dynamic form. the syntax was something like this here

 $@Html.AutoCompleteFor (model => model.Id, x => x.Code , "List") 

I left all the source code available (suggestions are welcome) and a zip file containing all the necessary files. Hope this helps!

Project URL http://autocompletemvc.codeplex.com/releases/view/70140

Bean Files http://autocompletemvc.codeplex.com/releases/70140/download/259741

+1
source share

I don’t think you are “loading into a text box”, but more than “attaching autocomplete to a” text box. Try creating an JavaScript array for the "answers" to autocomplete.

It would also help to know if you are using jQuery UI or an older version of autocomplete.

0
source share

All Articles