如何将JSON数据传递给自动完成功能 [英] How do I pass this JSON data to an autocomplete

查看:87
本文介绍了如何将JSON数据传递给自动完成功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

特别感谢劳尔·蒙格(RaúlMonge)为我发布了完整的工作代码.

Special thanks to Raúl Monge for posting a fully working code for me.

我的问题是从file.json获取JSON数据,并使用此数据通过JavaScript自动完成搜索.最终使它对我有用的代码如下:

My problem was getting JSON data from a file.json and using this data to autocomplete search on it with JavaScript. The code that finaly got it working for me is the following:

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

Thanks stackoverflow!

推荐答案

新的编辑代码工作:

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

这篇关于如何将JSON数据传递给自动完成功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆