jQuery UI自动完成并带有外部JSON文件 [英] jQuery UI autoComplete with external JSON file
问题描述
我正在尝试通过读取外部文件(即data.json)来编写jQuery UI自动完成功能.当我尝试从数组中读取代码时，代码可以正常工作，但是如果我尝试从外部文件中读取代码，则该代码将无法正常工作！不知道为什么！
I'm trying to write a jQuery UI autocomplete by reading an external file (i.e. data.json). The code works fine when I try to read it from an array but if I try to read it from an external file, it doesn't work anymore!?! Not sure why!!
这是我的代码:
http://plnkr.co/edit/LPqBGyocpswPrEzjb1Nq?p=preview
OR
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#autocomplete1" ).autocomplete(
{
source:"data.json",
select: function( event, ui ) {
$( "#autocomplete1" ).val( ui.item.code + " - " + ui.item.label );
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.code + " - " + item.label + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<input type="text" id="autocomplete1" size=40/>
</body>
</html>
/ *********************************************** ************* /
这是data.json文件:
Here's the data.json file:
{
{
"code":"YOO",
"label":"Oshawa",
"country":"Canada",
},
{
"code":"YOW",
"label":"Ottawa Macdonald-Cartier International",
"city":"Ottawa",
},
{
"code":"YOH",
"label":"Oxford House",
"city":"Oxford House",
}
}
tks
推荐答案
来自 docs :
源 类型:数组或字符串或函数(功能响应( Object data)))
Source Type: Array or String or Function( Object request, Function response( Object data ) )
Default: none; must be specified
Defines the data to use, must be specified. Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source option - look for one that matches your use case, and check out the code.
支持多种类型:
数组:数组可用于本地数据.支持两种格式:
Array: An array can be used for local data. There are two supported formats:
- 字符串数组:
[ "Choice1", "Choice2" ] - 具有
label和value属性的对象数组:[ { label: "Choice1", value: "value1" }, ... ]
- An array of strings:
[ "Choice1", "Choice2" ] - An array of objects with
labelandvalueproperties:[ { label: "Choice1", value: "value1" }, ... ]
label属性显示在建议菜单中.价值 当用户选择一个项目时，它将被插入到输入元素中. 如果仅指定了一个属性，则将同时使用这两个属性，例如 您仅提供值属性，该值也将用作 标签.
The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.
字符串:使用字符串时，自动完成插件会期望该字符串指向将返回JSON数据的URL资源.它 可以在同一主机上，也可以在其他主机上(必须提供 JSONP ).自动填充插件不会过滤结果， 而是在查询字符串中添加了一个term字段， 服务器端脚本应用于过滤结果.例如， 如果source选项设置为
"http://example.com"并且用户 类型foo，则会向GET请求http://example.com?term=foo.数据本身可以在同一位置 格式化为上述本地数据.
String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to
"http://example.com"and the user typesfoo, a GET request would be made tohttp://example.com?term=foo. The data itself can be in the same format as the local data described above.
功能:第三个变体是回调，提供了最大的灵活性，可用于将任何数据源连接到 自动完成.回调有两个参数:
Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
-
具有单个term属性的请求对象，它指向 文本输入中当前的值.例如，如果用户输入 在城市字段中，新哟"的自动填充字词将等于新 哟".
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
一个响应回调，它需要一个参数:将数据传递给 向用户建议.该数据应根据 提供的术语，并且可以采用上述任何格式 用于简单的本地数据.提供自定义时很重要 源回调以处理请求期间的错误.你必须 即使遇到错误，也总是调用响应回调. 这样可以确保小部件始终具有正确的状态.
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
在本地过滤数据时，您可以使用
内置的$.ui.autocomplete.escapeRegex函数.一口气
字符串参数并转义所有正则表达式字符，得出结果
可以安全地传递给new RegExp().
When filtering data locally, you can make use of the
built-in $.ui.autocomplete.escapeRegex function. It'll take a single
string argument and escape all regex characters, making the result
safe to pass to new RegExp().
您要指定string.这里的关键点是:
You're specifying a string. The key point here is:
自动完成"插件不会过滤结果，而是会添加带有字词字段的查询字符串，服务器端脚本应使用该字段来过滤结果.例如，如果将source选项设置为
"http://example.com"，并且用户键入foo，则将向http://example.com?term=foo发出GET请求.数据本身可以采用与上述本地数据相同的格式.
The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to
"http://example.com"and the user types foo, a GET request would be made tohttp://example.com?term=foo. The data itself can be in the same format as the local data described above.
如果要指定要命中的url，则该字符串将以指定格式返回数据.
The string if meant to specify a url to hit, which returns the data in specified format.
jQueryui自动完成功能不直接接受JSON，因此您的代码无法正常工作.您应该指定一个有效的数据源.
jQueryui autocomplete doesn't directly accept a JSON, hence your code isn't working. You should specify a valid data source.
他们的插件，其规则:)
相关:
- jQuery UI Autocomplete using a static json file as source
- jQuery UI autocomplete bring data from a json file
- jQueryUI - Autocomplete with json file
这篇关于jQuery UI自动完成并带有外部JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
