Fatal编程技术网
  • javascript/
  • Javascript 如何将此JSON数据传递给自动完成

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

javascript php json

Javascript 如何将此JSON数据传递给自动完成,javascript,php,json,Javascript,Php,Json,特别感谢劳尔·蒙格为我发布了一个完全有效的代码 我的问题是从file.JSON中获取JSON数据，并使用此数据使用JavaScript自动完成搜索。最终让它为我工作的代码如下： <script> $(document).ready(function(){ var arrayAutocomplete = new Array(); $.getJSON('json/telefoonnummers.json', function(json) { $.

特别感谢劳尔·蒙格为我发布了一个完全有效的代码

我的问题是从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});
    });      
});


$（文档）.ready（函数（）{
var arrayAutocomplete=新数组（）；
$.getJSON（'json/telefoonnumers.json'，函数（json）{
$.each（json.personen.persoon，函数（索引，值）{
arrayAutocomplete[索引]=新数组（）；
arrayAutocomplete[index]['label']=value.naam+“-”+value.telefoonnumer；
});
$（“#搜索”）.autocomplete（{来源：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>
谢谢你

为什么不使用

 var data = [
    "Aragorn",
    "Arwen",
    ....
    ];
因为所有这些数据都是标签？

您拥有的数据结构的工作示例。 只要在加载JSON之后初始化autocomplete&数据被格式化

$( "#search" ).autocomplete({source: availableTags});
您的文档准备就绪在您的功能范围内。 尝试在文档之外编写函数，以准备就绪。 然后编写文档，准备调用函数。 有些是这样的：

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);

});
希望这有帮助

还要确保您的头脑中包含jQuery
（）
：
并将javascript添加到正文的末尾
（）

要测试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>


jquery入门
我的页面
本段包含一些文本

$（文档）.ready（函数（）{
//显示对话框，确认何时加载文档并使用jquery。
警报（“boojah，jquery调用了documentready函数”）；
//使用jquery执行一些操作，例如修改dom
$（“p”）.append（“
我可以在jquery的帮助下修改dom，并添加了这一行，我太棒了。”）；
});
另外，取消对测试内容的提示注释，这样您就可以测试发生了什么。如果您的文档中有空间，我建议使用$.append添加到记录所有操作的div中，这样您就可以确切地看到发生了什么，因为警报处于类似的循环中。每个都非常烦人！有关追加的详细信息：

新编辑代码工作：

<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>


$（文档）.ready（函数（）{
var arrayAutocomplete=新数组（）；
$.getJSON（'data.json'，函数（json）{
$.each（json.persons.person，函数（索引，值）{
arrayAutocomplete[索引]=新数组（）；
arrayAutocomplete[index]['label']=value.name；
arrayAutocomplete[index]['value']=value.phoneno；
});
$（“#搜索”）.autocomplete（{来源：arrayAutocomplete}）；
});      
});
把这个加在头上

<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>
检查所有依赖项，尤其是jqueryOkay，让我看看。Thx:）我试图实现这一点，但我的自动完成功能没有显示任何结果，这可能是什么原因？编辑了我的代码，请查看。只需更新代码，现在它就可以工作了，如果您想在单击时显示名称，只需将数组值“value.phoneno”更改为“value.name”非常感谢您的帮助。这太棒了！最后一件事，有没有办法将电话号码添加到结果中？比如：凯文-201而不仅仅是名字？编辑：明白了！刚刚在标签上添加了phoneno值，谢谢！！！我试图实现这个，这也没有给我任何结果。当我输入搜索条件时，它将保持空白。我不知道为什么，但当我取消注释的评论，我也没有得到任何警报。对不起，我对JS真的很陌生。你脑子里有jquery吗？getJson、each和documentready都是jquery函数。我会更新我的答案，解释一下。一个测试jquery的示例，如果上面的第二个示例是。只需复制/粘贴第二个示例，并开始添加越来越多的代码。一点一点地测试，直到你掌握窍门！如果这仍然不起作用，您可能在浏览器中禁用了javascript。 
<body>
<div id="content">
    <input type="text" id="search" />       
</div>
</body>