让Autocomplete处理jQuery中的粘贴事件
我有一个初始化自动完成的函数,该函数在上调用。就绪:让Autocomplete处理jQuery中的粘贴事件,jquery,autocomplete,Jquery,Autocomplete,我有一个初始化自动完成的函数,该函数在上调用。就绪: function InitStudentsAutoComplete() { $("#acStudent").autocomplete({ delay: 250, focus: function (event, ui) { $("#acStudent").val(ui.item.name); return false; },
function InitStudentsAutoComplete() {
$("#acStudent").autocomplete({
delay: 250,
focus: function (event, ui) {
$("#acStudent").val(ui.item.name);
return false;
},
select: function (event, ui) {
$("#acStudent").val(ui.item.name);
$("#acStudent-id").val(ui.item.id);
SetCurrentStudentInfo(ui.item);
$("#acStudentShowDetails").addClass("linkShow").removeClass("linkNoShow");
return false;
},
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var matchList = $.grep(studentList, function (value) {
var studentName = value.name;
return matcher.test(studentName) || matcher.test(normalize(studentName));
});
response(matchList);
}
}).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>").append(item.name).appendTo(ul);
};
}
studentList是执行搜索的数组
因此,当用户开始键入字母“a”时,自动完成将列出studentList数组中包含该字母的所有条目。
用户选择一个,SetCurrentStudentInfo方法将使用属性设置所需的对象。
“自动完成”文本框旁边有一个“详细信息”链接:
<a id="acStudentShowDetails" href="javascript:ShowStudentDetails();">Details...</a>
单击将打开一个弹出窗口,显示所选学生的详细信息:
function SetCurrentStudentInfo(student) {
studentInfo = {
studentname: student.name,
address: student.contact.address,
email: student.contact.email,
studentId: student.id
};
}
function ShowStudentDetails() {
openDetailsPopup({
"Student Name": studentInfo.studentname,
"Address": studentInfo.address,
"EMail": studentInfo.email,
"Id": studentInfo.Id
}, { title: "Student Details" });
}
function openDetailsPopup(object, option) {
manageOption(option);
var rowTemplate = '<div class="row">' +
'<div class="col-xs-4 modal-field-label">{{$key}}</div>' +
'<div class="col-xs-7">{{$value}}</div>' +
'</div>';
var html = '';
for (var prop in object) {
if (object.hasOwnProperty(prop)) {
html += rowTemplate.replace("{{$key}}", prop).replace("{{$value}}", object[prop]);
}
}
$("#modalPopup-content").empty();
$(html).appendTo("#modalPopup-content");
$('#modalPopup').modal('show');
return;
function manageOption(inputOptions) {
if (!inputOptions) return;
$("#modalPopup-title").html((!!inputOptions.title) ? inputOptions.title : "Details");
}
}
当用户从建议列表中选择条目时,这一切都可以正常工作。
如果粘贴了某个内容,并且该内容是有效的条目,并且没有从建议中选择任何内容,则不会设置对象属性,因为这仅发生在选择事件上
在这种情况下,如果用户可以在文本框中粘贴一个有效的条目,而不从建议中选择一个值,我如何使其工作
我尝试绑定到粘贴事件,但不知道如何将ui.item值发送到SetCurrentStudentInfo
提前感谢。如果我理解正确,您需要在学生数组中查找粘贴的学生姓名,并调用SetCurrentStudentInfo,结果如下:
$( "#acStudent" ).on( 'paste', function ()
{
var pastedValue = $( this ).val();
var foundStudent = null;
$.each( studentList, function( index, student )
{
if ( student.name === pastedValue )
{
foundStudent = student;
return false;
}
} );
if ( foundStudent ) SetCurrentStudentInfo( foundStudent );
});