1

I am trying to create a jQuery autocomplete widget that uses a local json file.

The code for my index page is as follows:-

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 
  <p>
    <label>Address:</label>
    <input type='text' name='ward' value='' class='auto'>
  </p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
    $(function() {
        //autocomplete
        $(".auto").autocomplete({
            source: data.json,
            minLength: 3,
            delay: 0,
        });             

    });
</script>
</body>
</html>

I then have a separate file which I have called data.json containing the below code:-

[
    {"label":"Aragorn", "actor":"Viggo Mortensen"},
    {"label":"Arwen", "actor":"Liv Tyler"},
    {"label":"Bilbo Baggins", "actor":"Ian Holm"},
    {"label":"Boromir", "actor":"Sean Bean"},
    {"label":"Frodo Baggins", "actor":"Elijah Wood"},
    {"label":"Gandalf", "actor":"Ian McKellen"},
    {"label":"Gimli", "actor":"John Rhys-Davies"},
    {"label":"Gollum", "actor":"Andy Serkis"},
    {"label":"Legolas", "actor":"Orlando Bloom"},
    {"label":"Meriadoc Merry Brandybuck", "actor":"Dominic Monaghan"},
    {"label":"Peregrin Pippin Took", "actor":"Billy Boyd"},
    {"label":"Samwise Gamgee", "actor":"Sean Astin"}
];

When trying to search for a label nothing returns, is there something obviously wrong here? I have looked at the official samples but they do not use an already complete local json file so not sure if I am incorrectly coding the source right?

Thanks!

Edi G.
  • 2,432
  • 7
  • 24
  • 33
Chris
  • 647
  • 1
  • 8
  • 32

1 Answers1

0

you did not set data

var data = [
{"label":"Aragorn", "actor":"Viggo Mortensen"},
{"label":"Arwen", "actor":"Liv Tyler"},
{"label":"Bilbo Baggins", "actor":"Ian Holm"},
{"label":"Boromir", "actor":"Sean Bean"},
{"label":"Frodo Baggins", "actor":"Elijah Wood"},
{"label":"Gandalf", "actor":"Ian McKellen"},
{"label":"Gimli", "actor":"John Rhys-Davies"},
{"label":"Gollum", "actor":"Andy Serkis"},
{"label":"Legolas", "actor":"Orlando Bloom"},
{"label":"Meriadoc Merry Brandybuck", "actor":"Dominic Monaghan"},
{"label":"Peregrin Pippin Took", "actor":"Billy Boyd"},
{"label":"Samwise Gamgee", "actor":"Sean Astin"}
];
$(function() {
    //autocomplete
    $(".auto").autocomplete({
        source: data,
        minLength: 3,
        delay: 0,
    });             

});
john Smith
  • 17,409
  • 11
  • 76
  • 117
  • I have the data in a separate json file which I am trying to link to, it is not in the same file. – Chris Aug 21 '14 at 15:51