JQuery Autocomplete не работает правильно

Question

Я использую автозаполнение jquery. В моем случае у меня есть несколько текстовых полей с автозаполнением и скрытое поле на моей странице. например

<input class='myclass' type='text'> </input> 
<input class='.emp_num_hidden' type='hidden'> </input> 
<input class='myclass' type='text'> </input> 
<input class='.emp_num_hidden' type='hidden'> </input> 

и так далее ...

так, когда я огонь событие изменения на скрытом поле, то он поднимается множественное время ниже мой код:

$(".myclass").each(function() { 

var $empName= $(this); 
var $empNumber = $empName.next('input:hidden'); 
//things to do 
//Setting variable e.g url... 

$empName.autocomplete(url,{ 

//code... 

}).result(function(event,data,formatted) 
{ 
$empNumber.val(formatted).change(); 
}); 
}); 

В коде выше $ empNumber содержит скрытое поле, которое используется для хранения значения автозаполнения, то есть в этом случае, когда выберем любой текст из автозаполнения, тогда выбранный номер сотрудников получит хранилище в скрытом поле. Исходя из этого значения скрытого поля, я хочу выполнить вызов ajax, который вернет полную информацию о сотруднике по его номеру . Итак, я написал hanldler, чтобы изменить событие скрытого поля, как показано ниже.

$(.emp_num_hidden).on('change',function (

)}; 

здесь «emp_num_hidden» - это класс скрытого поля.

Просьба предложить, как предотвратить множественное событие при смене скрытого поля.

Answer 1

Это делается с использованием объекта $(this). Поскольку событие change имеет цель, оно будет выполнять только один элемент. На этом элементе выполняется функция обратного вызова, this. Например:

$(".emp_num_hidden").on('change', function (e){ 
    alert($(this).val()); 
}); 

Что будет происходить в том, что окно предупреждения будет показано, когда скрытое поле изменяется, содержащий номер сотрудника только из этого скрытого поля. Вы также заметите, что есть несколько исправлений для вашего кода.

Лично я использовал бы как id, так и class атрибуты на ваших объектах. Это дает вам широкие возможности и узкие возможности для ваших селекторов.

Пример:

HTML

<input class='myclass' type='text' id='entry-txt-1' /> 
<input class='emp_num_hidden' type='hidden' id='hide-txt-1' /> 
<input class='myclass' type='text' id='entry-txt-2' /> 
<input class='emp_num_hidden' type='hidden' id='hide-txt-2' /> 

JQuery

$(function(){ 
    var $empName, $empNumber; 

    $(".myclass").each(function(key, el) { 
    $empName= $(el); 
    $empNumber = $empName.next("input[type='hidden']"); 
    // things to do 
    // Setting variable e.g url... 
    $empName.autocomplete(url, { 
     //code... 
    }).result(function(e, d, f){ 
     $empNumber.val(f).change(); 
    }); 
    }); 
    $(".emp_num_hidden").on('change', function(e){ 
    var empId = $(this).attr("id"); 
    var $employeeNumberField = $("#" + empId); 
    // Do the needful... 
    }); 
}); 

Принимая это немного дальше, вы можете рассмотреть возможность использования атрибутов данных. Вы также можете посмотреть событие select для автозаполнения. Что-то вроде:

$(function(){ 
    $(".myclass").autocomplete({ 
    source: url, 
    select: function(e, ui){ 
     $(this).val(ui.item.label); 
     $(this).data("emp-number", ui.item.value); 
     $.post("employeedata.php", { n: ui.item.value }, function(data){ 
     $("#empData").html(data); 
     }); 
     return false; 
    } 
    }); 
}); 

Это предполагает, что url возвращает массив объектов с label и value свойствами. Это добавило бы Employee Number в качестве атрибута data-emp-number в поле, из которого пользователь делал выбор. label - их имя сотрудника, а value - их номер сотрудника. Вы также можете использовать этот обратный вызов для отображения всех других данных сотрудника на основе номера сотрудника.

Рабочий пример: https://jsfiddle.net/Twisty/zmevd0r0/