Adding array as a source to jQuery autocomplete

Question

I need to supply my autocomplete from a webservice who passes an array into the autocomplete source.

Here is my webservice:

    public Filter[] getAutoComplete(string column)
    {
        List<Filter> list = new List<Filter>();

        DbAccess dbacc = new DbAccess();

          DataTable dt = dbacc.getColumnHeader(column);

          Filter _Filter = new Filter();


          if (column == "member_id")
          {
              foreach (DataRow row in dt.Rows)
              {
                  _Filter.memid = row["member_id"].ToString();
              }
          }
          else if (column == "lname")
          {
              foreach (DataRow row in dt.Rows)
              {
                  _Filter.memid = row["lname"].ToString();
              }
          }
          else if (column == "mname")
          {
              foreach (DataRow row in dt.Rows)
              {
                  _Filter.memid = row["mname"].ToString();
              }
          }
          else if (column == "fname")
          {
              foreach (DataRow row in dt.Rows)
              {
                  _Filter.memid = row["fname"].ToString();
              }
          }

        list.Add(_Filter);

        return list.ToArray();
    }

And here is my jquery ajax:

$.ajax({

    url: "webservices/wbFilters.asmx/getAutoComplete",
    data: json,
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (mydata) {

        $("#tags").autocomplete({
            source: mydata
        });

    }
});

I can verify that my list array has a value. I just couldn't attach it to my autocomplete. I read that I can add a array as a source but I really can't get it to work.

Can someone please explain what needs to be done to get this working?

Jeroen de Kort · Accepted Answer · 2012-05-18 07:27:27Z

1

For custom data sources that hold more than a list of strings, you need to specify the property or properties you want to display. Therefore you need to override the _renderItem, like so:

$("#tags").autocomplete({
    source: myData
}).data("autocomplete")._renderItem = function(ul, item) {
    return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.memid + "</a>" )
            .appendTo( ul );
};

For detailed info, see: http://jqueryui.com/demos/autocomplete/#custom-data

answered May 18, 2012 at 7:27

Jeroen de Kort

1215 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Luke Villanueva Over a year ago

Now there's something. But it is undefined.

Jeroen de Kort Over a year ago

Maybe you need to combine my answer with Dappergoat's and use myData.d.

Luke Villanueva Over a year ago

I actually did that. Still now working. I'm getting undefined results.

Jeroen de Kort Over a year ago

Then you should try to debug what is in myData or item.

Luke Villanueva Over a year ago

I finally got it to work. Thank you guys. One more question. After entering a second character, the autocomplete hides. Is there a length or something that I should set to change this?

|

Dappergoat · Accepted Answer · 2012-05-18 07:27:58Z

0

Have you tried changing your Success function to this:

 success: function (mydata) {

        $("#tags").autocomplete({
            source: mydata.d
        });

    }

it is my experience that .net wraps the json object in a parameter called "d"

answered May 18, 2012 at 7:27

Dappergoat

4793 silver badges5 bronze badges

1 Comment

Dappergoat Over a year ago

Have you tried this in compbination with Jeroens answer? I've recently made a autocomplete feature like that

James · Accepted Answer · 2013-04-04 18:18:18Z

This worked great for me and it follows the api at jquery.

$("#Dialogs_ProjectID").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            url: "Log.aspx/jQuery_Get_Autocomplete",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                columnName: "Project",
                startsWith: request.term
            }),
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item
                    }
                }));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }

});

Collectives™ on Stack Overflow

Adding array as a source to jQuery autocomplete

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related