将JSON散列数组解析为jQuery标记输入
Parse JSON array of hashes into jQuery tokenInput
我实现了jQuery令牌输入,用于标记目的,用户可以搜索标签或创建新标签,这要归功于railscasts ep#382&ep#258。数据来自作为标签控制器的索引动作的tags.json
url。tags.json中的数据如下所示:
[
{
"created_at":"2013-06-21T16:30:19Z",
"explanation":"hitting the hosel of the club",
"id":8,
"name":"shank",
"updated_at":"2013-06-21T16:30:19Z",
"updated_by":"andy"
},
{
"created_at":"2013-06-22T17:40:37Z",
"explanation":"hitting the ground before the ball",
"id":12,
"name":"chunk",
"updated_at":"2013-06-22T17:40:37Z",
"updated_by":"andy"
}
]
我的标签有一个名称和一个解释,所以我想把它们包括在结果列表中,比如令牌和结果格式化演示http://loopj.com/jquery-tokeninput/demo.html#formatting.
下面的代码(为简洁起见,省略了条目数量)来自jQuery tokenInputToken and Results Formatting演示。
与其在这里手动输入"name":"Shank"以及其他省略的条目,我如何从tags.json哈希中提取名称和解释,并将其用于与结果格式化程序行相同的行中,例如item.name&item.解释?
tags.js
jQuery(function() {
var question = $('#question_tag_tokens')
return question.tokenInput([{
"name": "Shank",
"explanation": "hitting the hosel of the club"
}
], {
propertyToSearch: ["name"],
resultsFormatter: function(item){ return "<li>" + "<div class='tag' style='display:inline;color:#fff;'>" + item.name + "</div>" + " " + item.explanation + "</li>" },
prePopulate: question.data('preload')
});
});
您提到的示例的来源如下:
$(document).ready(function() {
$("#demo-input-local-custom-formatters").tokenInput(
[{
"first_name": "Arthur",
"last_name": "Godfrey",
"email": "arthur_godfrey@nccu.edu",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Adam",
"last_name": "Johnson",
"email": "wravo@yahoo.com",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
...
],
{
propertyToSearch: "first_name",
resultsFormatter: function(item){ ... },
tokenFormatter: function(item) { ... }
});
});
tokenInput
似乎采用了一组对象。使用ajax加载json后,只需将其传入并告诉它要搜索的字段以及一些用于格式化结果的回调。
相关文章:
- html/jquery输入类型:单选框中的文本不起作用
- jQuery-输入时不提交数据
- 使用jQuery输入的动态名称
- Jquery:输入类型=“”;按钮“;使用.click()函数在Internet Explorer和Safari中不起作
- 使用html中的jquery输入值窗口提示
- 找不到 jquery 输入自动完成函数
- jQuery输入未隐藏
- 将jQuery输入包含在表单帖子中
- jquery:输入选择器未选择:选择元素
- jQuery输入值故障排除
- 如果使用jquery输入一个字段,则自动填充其他字段
- Jquery 输入掩码在正则表达式中不可见
- 未定义 jQuery 输入参数
- IE 中的 Jquery 输入文件类型操作问题
- 带有 Li 的 jquery 输入选择器
- 如何将 jQuery 输入值传递给 Google Maps JS API v3
- Jquery 输入值未正确更新
- 作为触发器的 Jquery 输入类型文件不起作用
- 具有两个不同用户输入的 jQuery 输入掩码
- jQuery 输入选择 - 将中继器内的总计相加