Question

特别感谢RaúlMonge为我发布了一个完整的代码。

我的问题是从file.json获取JSON数据并使用此数据通过JavaScript自动完成搜索。最终让它为我工作的代码如下：

<script>
$(document).ready(function(){
    var arrayAutocomplete = new Array();
    $.getJSON('json/telefoonnummers.json', function(json) {         
    $.each(json.personen.persoon,function(index, value){
            arrayAutocomplete[index] = new Array();
            arrayAutocomplete[index]['label'] = value.naam+" - "+value.telefoonnummer;
        });
        $( "#search" ).autocomplete({source: arrayAutocomplete});
    });      
});

这是html：

<body>
<div id="content">
    <input type="text" id="search" />       
</div>

这必须包含在头部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

感谢stackoverflow！

Answer 1

新编辑代码工作：

<script>
$(document).ready(function(){
    var arrayAutocomplete = new Array();
    $.getJSON('data.json', function(json) {         
       $.each(json.persons.person,function(index, value){
            arrayAutocomplete[index] = new Array();
            arrayAutocomplete[index]['label'] = value.name;
            arrayAutocomplete[index]['value'] = value.phoneno;
        });
        $( "#search" ).autocomplete({source: arrayAutocomplete});
    });      
});
</script>

添加此内容

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

这是html

<body>
<div id="content">
    <input type="text" id="search" />       
</div>
</body>

Answer 2

为什么不使用

 var data = [
    "Aragorn",
    "Arwen",
    ....
    ];

因为所有这些数据都是标签？

Answer 3

There you go

具有您拥有的数据结构的工作示例。只需在加载JSON后初始化自动完成功能即可。数据已格式化。

$( "#search" ).autocomplete({source: availableTags});

Answer 4

您的文件已准备就绪。尝试在文档之外编写函数。然后编写您的文档准备好调用您的函数。有些事情是这样的：

function loadJson() {                               
   //alert("Whoohoo, you called the loadJson function!"); //uncomment for testing
   var mycontainer = [];
   $.getJSON( "data.json" , function(data) {
       //alert(data) //uncomment for testing
       $.each( data, function( key, val ) {
          //alert("key: "+key+" | val: "+val); //uncomment for testing
          array.push([key , val]);
       });

   });
   return mycontainer;

}

$(document).ready(function(){                   
   //alert("Boojah! jQuery library loaded!"); //uncomment for testing
   var content = loadJson();

   dosomethingwitharray(content);

});

希望这有帮助！

还要确保您的头部( <head> </head> )中包含jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

并在身体末尾添加您的javascript ( <body> </body> )。

要测试jquery是否可以尝试这个：

 <html>
    <head>
       <title>getting started with jquery</title>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    </head>
    <body>
       <h1>my page</h1>
       <p>this paragraph contains some text.</p>

       <!-- javascript at end -->
       <script>
          $(document).ready(function(){

             //show a dialog, confirming when the document is loaded and jquery is used.
             alert("boojah, jquery called the document ready function");

             //do something with jquery, for example, modify the dom
             $("p").append('<br /> i am able to modify the dom with the help of jquery and added this line, i am awesome.');

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

PS。取消注释测试内容的警报，以便您可以测试发生的情况。如果你的文档中有空格我建议使用$ .append来记录所有动作的div，这样你就可以看到发生了什么，因为像.each这样的循环中的警报非常烦人！有关追加的更多信息：http://api.jquery.com/append/

如何将此JSON数据传递给自动完成

4 个答案: