2016-01-05 45 views
-1

上粘贴事件工作,我有这个功能,初始化其呼吁。就绪自动完成:获取自动填充jQuery中

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"); 
    } 
} 

这一切工作正常时,用户从建议列表中选择一个条目。 当粘贴东西并且它是一个有效的条目并且没有任何东西从建议中选择时,对象属性没有被设置,因为这只发生在Select事件上。

在这种情况下,用户可以在文本框中粘贴一个有效条目并且不会从建议中选择一个值,我该如何使其工作?

我尝试绑定到粘贴事件,但我不知道如何将ui.item值发送到SetCurrentStudentInfo()!

在此先感谢。

回答

1

如果我理解正确的话,你需要查找粘贴的学生姓名学生的数组中,并调用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); 
});