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

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>