Jquery 自动完成功能无法正常工作

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 调用，它将根据他的员工返回完整的详细信息 员工编号。 所以我写了一个handler来改变隐藏字段的事件，如下所示。

$(.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 属性的数组对象。这会将员工编号作为data-emp-number 属性添加到用户从中进行选择的字段中。 label 是他们的员工姓名，value 是他们的员工编号。您还可以使用此回调根据员工编号显示所有其他员工数据。

一个工作示例：https://jsfiddle.net/Twisty/zmevd0r0/