jQuery ui autocomplete usin JSON file

Question

I am having some trouble getting autocomplete to work specifically with a json file. It giving following error whenever something is entered in the text box

url is undefined

following is my jQuery code

$(document).ready(function() {
$('#autocomplete').autocomplete({
    minChars: 1,
    source: function(request, response) {
            var url='dataa.json';

        $.getJSON(url,{term: request.term},function(data){

            response($.map(data.ledgers, function(item) {
            return item.value;
        }));
    })
    }
});
});

and the JSON

{
"ledgers": 
[
{
    "id":"2001",
    "name":"Bharat"
},
{
    "id":"2003",
    "name":"Gaurav"
},
{
    "id":"2002",
    "name":"Pankaj"
},
{
    "id":"2022",
    "name":"Purchase"
},
{
    "id":"2007",
    "name":"Ram"
},
{
    "id":"2008",
    "name":"Ramesh"
},
{
    "id":"2009",
    "name":"Suresh"
}
]}

I prepared page with the code you provided and it works. Tried in Chrome, not sure whether other browser will make any difference. Did you try use this script in isolation from your main app as I did? — Tomek, Nov 03 '12 at 11:50

score 2 · Answer 1 · edited May 23 '17 at 12:27

Your JSON file format needs to contain value or label (or both). Change name to value and it should work fine.

$('#autocomplete').autocomplete({
    minChars: 1,
    source: function(request, response) {
            var url='dataa.json';

        $.getJSON(url,{term: request.term},function(data){
            response($.map(data.ledgers, function (value, key) {
                return {
                    label: value,
                    value: key
                };
            }));
        })
    }
});

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

Try adding 'use strict'; at the top of your $(document).ready(). That may point out what the problem is...

return item.value;

item does not have a value, try returning id or name, which it does have.

edited May 23 '17 at 12:21

Community

1
1

answered Nov 03 '12 at 16:08

pete

24,141
4
37
51

jQuery ui autocomplete usin JSON file

2 Answers2