Question

所以我有两个自动完成容器。我将使用相同的自动完成调用，而不是两次编写代码。

但是为了试图正确的自动完成（读取：填充正确的结果列表），我需要将它分配给变量。我很久以前就已经这样做了，但我忘了我是怎么做到的。

所以我有以下内容：

  autocomplete: function () {
    var autocompleteInput = null;
    var autocompleteResultList = null;

    $('.autocomplete').on("input", function (e) { // I have 2 of these
      autocompleteInput = $(this);  // This is the input i'm working with
      autocompleteResultList = autocompleteInput.closest('.autocomplete-result');
      resourcesData(autocompleteInput.val());
    }).on('focus', function (e) {
      autocompleteInput.val(''); //Cannot read property 'val' of null
    }).on('blur', function (e) {
      autocompleteResultList.removeClass('is-active');
    });
  }

我的HTML x 2（简短版）

      <div class="autocomplete-wrapper">
        <input class="autocomplete" type="text" >
        <input class="resource-id" type="hidden">
        <div class="autocomplete-result"></div>
      </div>

我很确定它是关于设置变量= jQuery对象（autocompleteInput = $(this);）的一些基本jQuery知识，以及它如何工作我忘记了。

任何帮助表示赞赏：）

PS。我没有使用jQuery自动完成 - 我已经创建了自己的。

Answer 1

您必须放弃在不同事件回调中共享的变量。但是因为它们很容易派生，所以只需在每个事件处理程序本身中执行此操作。

有些注意事项：

closest方法只适用于父母，而不是兄弟姐妹，因此请使用siblings方法（或者如果您的结构与您的问题略有不同，可能是.closest(".autocomplete-wrapper").find(".autocomplete-result")）。
resourcesData目前没有提供有关它应该填充数据的位置的任何信息，所以你应该为它传递一个额外的参数，以便知道在哪里填充，并在该函数中处理该参数。

建议的代码是：

autocomplete: function () {
    $('.autocomplete').on("input", function (e) {
        // extra argument
        resourcesData($(this).val(), $(this).siblings('.autocomplete-result'));
    }).on('focus', function (e) {
        $(this).val('');
    }).on('blur', function (e) {
        $(this).siblings('.autocomplete-result').removeClass('is-active');
    });
}

Answer 2

在Patric，Baao和Trincot（以及其他人）的帮助下，我得到了它的帮助。所以，只是想分享我的工作解决方案，只是因为其他人正面临着类似的问题。它可能不是最优雅的解决方案，但它正在发挥作用：）

let resources = {
  init: function () {
    this.searchResources();
  },

  searchResources: function () {
    var self = this;

    $('.autocomplete').on("input", function (e) {
      let term = $(this).val();
      if(term.length > 1){
        self.autocomplete($(this));
      }
    }).on('focus', function (e) {
      $(this).val('');
    }).on('blur', function (e) {
      $(this).closest('.autocomplete-result').removeClass('is-active');
    });
  },

  autocomplete: function(obj){
    let url = 'http://localhost.no:8080/resources%TERM';
    url = url.replace('%TERM', '/' + $(obj).val() );

    var resultList = $(obj).siblings('.autocomplete-result');
    let source = $('#autocomplete-list').html();
    let template = Handlebars.compile (source);

    $.ajax({
      method: "GET",
      url: url,
      dataType: "json",
      success: function(result) {
        let content = template({resources: result.data});
        $(resultList).html(content);

        $('.autocomplete-list-item').on('click', function (e) {
          $(obj).siblings('input.resource-id').val($(this).data('resource-id'));
          $(obj).val($(this).data('resource-name'));
          $(resultList).removeClass('is-active');
          console.log($(this).data('resource-id'));
          console.log($(this).data('resource-name'));
        });
      },
      error: function(err){console.log(err);}
    }).done(function () {
      var resultList = $(obj).siblings('.autocomplete-result');

      if(!$(resultList).hasClass('is-active')){
        $(resultList).addClass('is-active')
      }
    });
  }
};

我的一个输入字段如下所示：

      <div class="input-field column is-6 autocomplete-wrapper">
        <input id="autocomplete-owner" class="autocomplete" autocomplete="off" type="text" >
        <label for="autocomplete-owen">Prosjektleder</label>
        <input id="resource-id-owner" class="resource-id" type="hidden" name="resource-id-owner">
        <div class="autocomplete-result"></div>
      </div>

如何将jQuery对象分配给变量？

2 个答案: