我为标记目的实现了jQuery令牌输入,用户可以通过railscast 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 tokenInput 令牌和结果格式演示。
而不是手动输入“名称”:手动输入“Shank”以及其他省略的条目,如何从tags.json哈希中提取名称和解释并使用它们与结果格式化行相同,例如item.name& item.explanation?
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')
});
});
答案 0 :(得分:1)
您提到的示例的来源如下:
$(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,你只需将其传入并告诉它要搜索的字段和一些回调来格式化结果。