Получение подсказок для работы на мероприятии вставки в JQuery

Question

У меня есть эта функция, которая инициализирует автозаполнения, которая называется на .ready:

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()!

Заранее спасибо.

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