CODEWITHSUNDEEP
jqueryasp.net-mvc-3jquery-autocomplete
learning
learning

Reputation: 11725

using jquery autocomplete difficulty

I am using jquery autocomplete but having dificulty to load the autocomplete in the textbox

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 STILL NOT WORKING

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


    });

Upvotes: 6

Views: 16648

Answers (3)

Sergi Papaseit
Sergi Papaseit

Reputation: 16174

You should actually be attaching the autocomplete behaviour to your text box.

That said, the autocomplete version included in the jQuery library isn't totally straightforward 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 on your textbox; for examples on how to do that check the jQuery autocomplete examples

UPDATE based on final resolution

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

From the 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 yourself from the official jQuery UI Page

Upvotes: 16

Paulo
Paulo

Reputation: 73

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

     [email protected](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 that helps!

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

Bin files http://autocompletemvc.codeplex.com/releases/70140/download/259741

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

I don't think you "load in the textbox" but more "attach autocomplete to" the textbox. Try creation of a JavaScript array for the "answers" to the autocomplete.

It would also help to know if you use jQuery UI or the older plugin version of autocomplete.

Upvotes: 0

Related Questions