【问题标题】:Referencing the text input from within jQuery autocomplete从 jQuery 自动完成中引用文本输入
【发布时间】:2011-06-22 17:26:52
【问题描述】:

鉴于以下代码,我如何在 $.ajax 调用中的 success() 函数中引用绑定了自动完成功能的输入? $(this)$e 都不起作用。

$('.parent-input').autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/chunky/bacon",
      dataType: 'json',
      data: {
        product_id: $('#product-id').val(),
        term: request.term
      },
      success: function(data){
        var resultCount = data.length;
        // I NEED TO REFERENCE .parent-input HERE
        response( data );
      }
    });
  },
  minLength: 2,
  select: function(event, ui){
    addAssociatedProduct(ui.item.id, ui.item.value);
    $(this).val('');
    return false;
  }
});

【问题讨论】:

  • parent-input是否有多个元素?如果没有,为什么不直接给它一个 id parent-input,然后使用选择器函数引用它?

标签: jquery jquery-ui jquery-ui-autocomplete


【解决方案1】:

保存对this.element 的引用(this.element 是一个 jQuery 对象,因此实际上不需要将其包装在另一个 jQuery 调用中):

$('.parent-input').autocomplete({
  source: function(request, response) {
    var element = this.element; // <-- this.element is the input the widget is bound to.
    $.ajax({
      url: "/chunky/bacon",
      dataType: 'json',
      data: {
        product_id: $('#product-id').val(),
        term: request.term
      },
      success: function(data){
        var resultCount = data.length;
        // element still refers to the input the widget is bound on.
        // for example:

        element.addClass("blue");

        response( data );
      }
    });
  },
  minLength: 2,
  select: function(event, ui){
    addAssociatedProduct(ui.item.id, ui.item.value);
    $(this).val('');
    return false;
  }
});

【讨论】:

  • 如果您要使用var element=this;,您可能必须将context: element 参数添加到ajax 调用中
  • @hughes:其实我不认为你这样做,但它可以让你在AJAX调用的成功函数中使用$(this)。跨度>
  • 哦,是的,你是对的。在那种情况下,element 会成为全局变量吗?还是element的声明范围内的success函数?还是在 JS 中这些都不重要?
  • @hughes:不,element 的作用域是 source 函数。
  • 太棒了!而且我刚刚发现没有必要声明“元素”变量,在成功处理程序中可以参考$(this)[0].element
猜你喜欢
  • 2013-10-19
  • 2012-11-14
  • 1970-01-01
  • 2011-09-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多