我正在使用 jQuery UI 构建一个自动完成的电子邮件字段。
该表格工作正常，但我有 2 个问题:
第一个
电子邮件不断地彼此相邻添加并构建在包含 div 之外，如下所示:
代码
<style type="text/css">
#emailDiv
{
width: 300px;
padding: 3px 3px 0;
margin: 0 auto;
border: 1px solid #aaa;
background-color: #fff;
cursor: text;
position: absolute;
float: left;
}
#email
{
border : none
}
#emailDiv span
{
border:solid 1px black
}
</style>
<script type="text/javascript">
$(function() {
$("#emailDiv").click(function() { $("#email").focus(); })
$("#email").autocomplete({
source: function(request, response) {
$.ajax({
url: "AutoComplete.asmx/GetEmails",
data: "{ 'mail': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value: item.Emails
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
select: function(e, ui) {
var list = ui.item.value;
var span = $("<span>").text(list);
span.insertBefore("#email");
},
change: function() {
$("#email").val("");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Email: </label>
<div id="emailDiv">
<input type="text" id="email" />
</div>
</div>
</form>
</body>
</html>
第二个
更改后我无法将电子邮件文本字段设置为空 我必须单击 emailDiv 之外的某处才能将其设为空。
最佳答案
如果我理解你问题的正确性:
第一个问题
这取决于您的文档类型和全局 CSS 重置声明的其余部分，但通过这个示例，它解决了您的问题:
查看此 working Fiddle例子!
CSS
#emailDiv {
width: 300px;
padding: 3px 3px 0;
margin: 0 auto;
border: 1px solid #aaa;
background-color: #fff;
cursor: text;
position: absolute;
float: left;
}
#email {
border: 0 none;
}
#emailDiv span {
border: 1px solid black;
float: left;
padding: 2px;
margin: 2px;
}
.clear {
clear:both!important;
}
HTML 模拟
<form id="form1" runat="server">
<div>
<label>Email: </label>
<div id="emailDiv" class="clear">
<span>soneone@something.com</span>
<span>soneone@thing.com</span>
<span>soneone@ss.com</span>
<span>soneone@aa.com</span>
<span>soneone@dd.com</span>
<input type="text" id="email" />
</div>
</div>
</form>
第二期
添加$(this).val(''); return false; 到 select 函数的末尾，这将阻止更新值。
查看此 Working Fiddle例子!
$(function() {
$("#emailDiv").click(function() {
$("#email").focus();
});
$("#email").autocomplete({
source: function(request, response) {
$.ajax({
url: "AutoComplete.asmx/GetEmails",
data: "{ 'mail': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
value: item.Emails
}
}));
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
select: function(e, ui) {
var list = ui.item.value;
var span = $("<span>").text(list);
span.insertBefore("#email");
// clear the input
$(this).val(''); return false;
}
});
});
似乎在源代码上，他们检查了错误!
关于jquery - 自动完成电子邮件跨度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10803411/