Question

我正在使用jQuery UI Autocomplete插件进行ajax调用并检索数据。除了传递input元素的文本之外，我还试图将input元素的'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'属性，例如$（本）.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') ... });
});

可能有更优雅的方式，但是，我知道自动完成有点复杂。我个人生成带有get参数的请求，并使用formatItem / formatResult而不是将源分配给ajax调用。

Answer 2

我通过将自动完成呼叫分解为每个来完成它。这允许我在执行自动完成之前捕获目标元素 -

$("#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

“源”是输入的ID，您将收到此项目并将其保存在变量“ that”中。当输入“源”调用自动完成功能时，您可以发送存储在AJAX变量“ that”中的id值。示例：

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

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

3 个答案: