jQuery自动完成 - 将目标元素属性作为额外参数传递？

Question

我正在使用jQuery UI Autocomplete插件来进行ajax调用并获取数据，除了传递输入元素的文本外，我还试图传递输入元素的 "id "属性作为额外的参数。除了传递输入元素的文本外，我还试图传递输入元素的 "id "属性作为一个额外的参数。我的代码摘要如下

    $("#autocomplete input").autocomplete({ 
        source: function(request, response) {
            $.ajax({
                url: "search.php",
                dataType: "json",
                data: {
                    term: extractLast(request.term),
                    extra_param: $(this).attr('id')
                },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.label,
                            value: item.name
                        }
                    }))
                }
            })
        },

    });

额外的参数被添加到ajax调用的'data'属性中。如果我明确地传递一个值，例如'3'，它就能正常工作，但我想传递函数被调用的输入元素的'id'属性，例如$(this).attr('id')。

我想这是'this'在这部分代码中没有被评估的问题，但我不知道如何才能引用目标元素。任何帮助感激不尽

Answer 1

$('#autocomplete input').each(e, function() {
    $(e).autocomplete('/path?param=' + $(e).attr('id'), function() { ... });
});

$('#autocomplete input').each(e, function() {
    $(e).autocomplete({ source:function ... extra_param: $(e).attr('id') ... });
});

也许有一个更优雅的方式，但是，我知道自动完成是有点复杂的。我个人生成请求wget参数，并使用formatItemformatResult，而不是将源分配给ajax调用。

Answer 2

我通过将自动完成调用分解成一个each来实现它的工作。这让我可以在执行自动完成之前捕获目标元素--。

$("#autocomplete input").each(function() {

    var that = this;

    $(that).autocomplete({

        source: function(request, response, this_element) {
            $.ajax({
                url: "search.php",
                dataType: "json",
                data: {
                    term: extractLast(request.term),
                    extra_param: $(that).attr('id')
                }
      ....

Answer 3

"Source "是你输入的ID，你接收到这个项目并保存在变量 "that "中。当输入 "Source "调用自动完成功能时，你可以发送你的id值存储在变量 "that "中，用于AJAX.Example。

<script type="text/javascript">
$(document).ready(function() {
$("#Source").each(function() {
  var that = this;
  var url = "<?php echo constant('URL'); ?>";
  $(that).autocomplete({
    source: function(request, response){
      $.ajax({
        url: url+"models/queries/C_getOptions.php",
        dataType:"json",
        data:{
          word:request.term,
          id : $(that).attr('id')
        },
        success: function(data){
          response(data);
        }
      });
    },
    minLength: 1,
    select: function(event,ui){
      //alert("Selecciono: "+ ui.item.label);
    }
  });
})
});