Question 37189 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Autocomplete with jQuery

I have been trying to build a simple jQuery Autocomplete. The ajax query returns a JSON String formatted like this below

[[{"stockkeepingunitname":"LIT","stockkeepingunitid":"627d3240-174d-11ed-a08e-f3a5c3baaa0d"},{"stockkeepingunitname":"LKTTT","stockkeepingunitid":"8fb03b68-1752-11ed-adc9-4f54c8003b1e"},{"stockkeepingunitname":"TBN","stockkeepingunitid":"f0825efe-173d-11ed-a983-1ff727e3bf1b"}]]

Then I pass it to the AutoComplete functions as below.

$('#stockKeepingUnit_StockKeepingUnitName').autocomplete({
            source: function (request, response) {
                $.getJSON("/ajax/GetStockKeepingName/?strStockKeepingName=" + $('#stockKeepingUnit_StockKeepingUnitName').val() +
                    "&lStoreID=" + $('#stockKeepingUnit_StoreID').val(), function (data) {
                        //console.log(response);

                    response($.map(JSON.parse(data), function (item) {
                        
                        console.log(JSON.parse(data));
                        console.log("Value = " + item[0].stockkeepingunitname + " key = " + item[1]);
                            return {

                                label: item[0].stockkeepingunitname,
                                value: item[0].stockkeepingunitid
                            };
                        }))

                    });
            },
            minLength: 1,
            delay: 100
        });
        $("#stockKeepingUnit_StockKeepingUnitNameame").autocomplete("option", "position",
            { my: "right-10 top+10", at: "right top" })

I am however unable to decode the rest of the list because I am only able to access the item[0] only but I have confirmed that the JSON contains more than one row, hence the list displays only one row.

If I remove the [0] the debugger says the element is a JavaScript object [object Object] element, but I can still see the list of objects in the debugger.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The error was the extra [ and ] in the JSON string, so whenever JSON.parse(data) was invoked it made a malformed JSON string. Removing the initial and closing [] tags removed the error, first with dataString.replace("[[{", "[{"); and then dataString.replace("}]]", "}]"); solved the problem.

    Everything working fine now.


  2. 0

    Consider the following example.

    JSFiddle: https://jsfiddle.net/Twisty/p9hzcdLb/

    $(function() {

  var myData = [
    [{
      "stockkeepingunitname": "LIT",
      "stockkeepingunitid": "627d3240-174d-11ed-a08e-f3a5c3baaa0d"
    }, {
      "stockkeepingunitname": "LKTTT",
      "stockkeepingunitid": "8fb03b68-1752-11ed-adc9-4f54c8003b1e"
    }, {
      "stockkeepingunitname": "TBN",
      "stockkeepingunitid": "f0825efe-173d-11ed-a983-1ff727e3bf1b"
    }]
  ];

  $('#stockKeepingUnit_StockKeepingUnitName').autocomplete({
    source: function(request, response) {
      $.getJSON("/ajax/GetStockKeepingName/", {
        "strStockKeepingName": request.term,
        "lStoreID":  $('#stockKeepingUnit_StoreID').val()
      }, function(data){
        response($.map(data[0], function(item) {
          console.log(data);
          console.log("Value = " + item.stockkeepingunitname + " key = " + item.stockkeepingunitid);
          return {
            label: item.stockkeepingunitname,
            value: item.stockkeepingunitid
          };
        }));
      });
    },
    minLength: 1,
    delay: 100
  });
  $("#stockKeepingUnit_StockKeepingUnitNameame").autocomplete("option", "position", {
    my: "right-10 top+10",
    at: "right top"
  });
});

    You have a complex response data, so you need to ensure you are iterating the correct items.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search