标记生成器:
http://loopj.com/jquery-tokeninput/
当用户关注输入时,显示提示“键入搜索词”。是否可以使用jQuery UI的自动完成功能执行此操作? http://jqueryui.com/demos/autocomplete/
我正在为我的数据使用远程源,但我想可能会分配一个长度为1的临时源([“输入搜索词”,“”])自动完成,直到启动搜索?
答案 0 :(得分:0)
这是您要找的内容:更新演示 http://jsfiddle.net/vWJdT/ * older => * 工作演示 http://jsfiddle.net/MQfEL/
我估计你要找的是:http://loopj.com/jquery-tokeninput/
希望它适合您的事业:)
<强>脚本强>
<script type='text/javascript' src="https://raw.github.com/loopj/jquery-tokeninput/master/src/jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css" href="http://loopj.com/jquery-tokeninput/styles/token-input.css">
<link rel="stylesheet" type="text/css" href="http://loopj.com/jquery-tokeninput/styles/token-input-facebook.css">
<强>代码强>
$(document).ready(function() {
$("#demo-input-local-custom-formatters").tokenInput([{
"first_name": "Tats_innit",
"last_name": "Godfrey",
"email": "Tats_innit@mit.whatwhatwuthulk.edu",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Jackson",
"email": "andre.jackson@yahoo.com",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Jolly",
"email": "andre.jolly@uol.com.br",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Henderson",
"email": "andre.henderson@globo.com",
"url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
}
], {
propertyToSearch: "first_name",
resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.first_name + " " + item.last_name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.first_name + " " + item.last_name + "</div><div class='email'>" + item.email + "</div></div></li>" },
tokenFormatter: function(item) { return "<li><p>" + item.first_name + " <b style='color: red'>" + item.last_name + "</b></p></li>" },
});
});
工作形象
顺便说一句,我不是戈弗雷。
答案 1 :(得分:0)
您需要做的是更新source
参数,以便自己制作AJAX请求。当您等待AJAX请求返回时,您将向小部件传递一个“加载”项(就像您在问题中建议的那样):
$("#auto").autocomplete({
source: function (request, response) {
// Populate the list with temporary loading item:
response([loadingItem]);
$.ajax({
url: "my_remote_source",
data: request
}).success(response).error(function () {
response([]);
});
},
select: function (event, ui) {
if (ui.item.loading) {
event.preventDefault();
}
},
focus: function (event, ui) {
if (ui.item.loading) {
event.preventDefault();
}
}
});
select
和focus
事件处理程序可以防止“加载”项被点击或聚焦。不幸的是,点击它时加载项目就会消失,但如果这很重要,可以很容易地修复。