jQuery autocomplete integration

Question

I found this jQuery and I want to integrate it into my project. My question is how do I apply that "source"?

Because on my inputs I receive all from the database and I cannot write nothing before in html or jQuery!

Actually I use a wicket component to do auto-complete but that component is buggy because if I resize the browser, the list is not aligned below the input, and because of that I am trying to find a better way.

If anyone can hep me :)

var $element = $('.my-autocomplete');
var $testinput = $element.find('.my-autocomplete-input');

$testinput.autocomplete({
    minLength: 0,
    autoFocus: true,
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
  });

Fiddle example: http://jsfiddle.net/CSypd/36/

Thank you!

Answer 1

Client Side

    $("#element _id").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("GetEmployeeDepartmentStuff")',  
                        //generates into a url. eg http://www.site.com/MyPage/GetEmployeeDepartmentStuff?filter=....
                        dataType: "json",
                        data: {
                            filter: request.term
                        },
                        success: function (data) {
                            response($.map(eval(data), function (item) {
                                return {
                                    label: item.em_name,
                                    dp_Name: item.dp_Name
                                }
                            }));
                        }
                    })
                },
                maxLength: 2,
                select: function (event, ui) {                   
                    $("#Deparment").attr('value', ui.item.dp_Name);
                }
            });

Server-side

    [HttpGet]
    [CompressFilter]
    public ActionResult GetEmployeeDepartmentStuff(string filter = "")
    {
        SomeRepository repo = new SomeRepository();
        return repo.GetEmployeeDepartmentStuff(filter);   //returns a JSON result
    }

Don't know what langue you use for your server-side code, but you need to have a web method/service/something exposed that accepts the parameter "filter" (see above), or whatever else you want to send back.... also don't forget to include the jquery libraries in your markup

Answer 2

The simplest idea would be to get your source array via ajax call.