您的位置：首页 > 其它

ajax实现姓名的联想功能，input可以添加过个值

2018-03-07 15:22 411 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自动联想</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function bb(e) {
function split(val) {
return val.split(/,\s*/);
}
userName = document.getElementById("tagsTemp").value;
userName = userName.substr(userName.lastIndexOf(',') + 1,
userName.length).replace(/\s+/g, "");
/* console.log(userName); */
$("#tagsTemp").autocomplete({
minLength : 0,
source : function(request, response) {
$.ajax({
cache : true,
type : "GET",
/* url : "/testtest?userName='"+userName+"'", */
url : "/testtest",
data : {
userName : userName
},
async : true,
error : function(request) {
alert("请求失败！");
},
success : function(data) {
response($.map(data, function(item) {
return {
label : item.znName + " " + item.email,
znName : item.znName,
email : item.email
}
}));
}
});
},
select : function(event, ui) {
var terms = split(this.value);
/* $("#tagsTemp").attr('value', ui.item.znName); */
$("#tagsTemp").attr('data-value', ui.item.email);
// remove the current input
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(", ");
return false;
}
});
};
</script>
</head>
<body>
<form id="testtesttest">
<div class="ui-widget">
<label for="tags">联想文本框: </label> <input oninput="bb(event)"
id="tagsTemp" size="50" type="text" name="tagsTemp" value=""
data-value="">
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

ajax实现姓名的联想功能 ，input可以添加过个值

ajax实现姓名的联想功能，input可以添加过个值