jQuery AutoComplete not rendering correctly

Question

I have two jQuery autocomplete components on my site. Both nearly exactly the same however, one displays correctly and one doesnt.

The code for the working one is:

@Html.TextBoxFor(model => model.Part, new { @id = "txtPartCode" })

$('#txtPartCode').autocomplete({
    minLength: 3,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Part/Filtered/' + $('#txtPartCode').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    response(data);
                }
        });
     }
});

The code for the failing one is:

@Html.TextBoxFor(model => model.ParentRequestId, new { @id = "txtParentRequest" })

$('#txtParentRequest').autocomplete({
    minLength: 1,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Request/' + $('#txtParentRequest').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    response(data);
                }
            });
     }
});

As you can see they are very similar. The response from the API for the working one is ["string1", "string2", "string3"] and for the broken one is [1,2,3,4] .

The jQuery libraries are included in my bundles so should be the same on all pages. I have used jquery.js , jquery-ui.js and jquery-ui.css .

I cant work out the difference between them as to why the one does not display correctly.

The broken one displays as follows:

Any help with this would be greatly appreciated. Please let me know if more info is required

EDIT - Solution But Why?

So the issue appeared to be that the jQuery Autocomplete component did not like an input of an array of integers.

This seems quite strange to me and I believe an autocomplete should be able to cope with integers. Does anybody know why this is or if there is a setting to handle it?

Answer 1

jquery-ui autocomplete would work good with String responses. Your response data should be a list of strings and not integers (as the value attribute for the input element is always a string).

Try converting the response data to string either at client side or server side. I prefer doing it at the client side.

$('#txtParentRequest').autocomplete({
    minLength: 1,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Request/' + $('#txtParentRequest').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    // Convert the integer list to a string list
                    var stringList = $.map(data, function(element){
                                         return element + "";
                                     })
                    response(stringList );
                }
            });
     }
});

Answer 2

It's because JQuery autocomplete supports only two array formats as explained below:-

source Type:

Array or String or Function( Object request, Function response( Object data ) ) Default: none; must be specified Defines the data to use, must be specified. Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.

Multiple types supported: Array: An array can be used for local data. There are two supported formats : An array of strings: [ "Choice1", "Choice2" ] An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ] The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item.

You can have a look at API documentation for more details: http://api.jqueryui.com/autocomplete/

So as per me you can convert your array to string from backend or you can convert it by Javascript like this:-

$('#txtParentRequest').autocomplete({
    minLength: 1,
    source: function (request, response) {
        $.ajax({
                url: apiEndpoint + 'api/Request/' + $('#txtParentRequest').val(),
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    if(data!=null && data.length>0){
                            var numberArray=data.map(String);
                            response(numberArray);
                            //Or response(data.map(String));
                    }  
                }
            });
     }
});