触发活动模式字段的自动完成

Question

这里的情况是，在几个页面上，我有一个具有自动填充搜索字段的模态。所以我没有给每个字段提供几个不同的ID，然后触发它们，而是使用了一个公共类，并试图在autocomplete()类的模态中触发.activeModal字段。

function customerSearch() {
  $(".activeModal .customerSearch").autocomplete({
    minLength: 1,
    focus: function(event, ui) {
      event.preventDefault();
      $(".activeModal .customerSearch").val(ui.item.label);
    },
    source: function(request, response) {
      $.ajax({
        url: "/operations.php",
        dataType: "json",
        type: "post",
        data: {
          "req": "searchCustomer",
          "query": $(".activeModal .customerSearch").val(),
        },
        success: function(data) {
          response($.map(data, function(item) {
            return {
              id: item.id,
              label: item.label,
              value: item.value
            }
          }));
        }
      })
    },
    select: function(event, ui) {
      event.preventDefault();
      $(".activeModal .customerSearch").val(ui.item.label);
      $(".activeModal .customer_id").val(ui.item.value);
    }
  })
}

$(document).ready(function() {
  customerSearch();
});

然而这不起作用;它没有显示任何结果。当我检查浏览器控制台时，它也没有给出任何错误。

我做错了什么？我是jQueryUI的新手，所以请饶恕我愚蠢的错误。

编辑：这个问题似乎让很多人感到困惑，所以;例如，这里有3个模态，在同一页面上具有相同目的的字段：

<div class="modal" id="newGiftcard">
    <div class="head">
        <span class="modalTitle">
            Issue new giftcard
        </span>
        <span class="controller">
            <span class="close lnr lnr-cross"></span>
        </span>
    </div>

    <div class="main">
        <form id="newGiftCardForm">
            <input type="text" name="customer" placeholder="Search customer" class="ui-widget customerSearch" id="customerSearch" />
            <input type="hidden" class="customer_id" id="customer_id"/>
            <input type="checkbox" id="walkinGC" class="walkin" /><label for="walkinGC">&nbsp;&nbsp;Walk in</label>
            <input type="text" id="cardNumber" placeholder="Gift card number" />
            <input type="text" id="balance" placeholder="Balance" />
            <select id="payMethod">
                <option value="">Select a payment mode</option>
                <option value="cash">cash</option>
                <option value="card">card</option>
                <option value="cheque">cheque</option>
            </select>
            <button type="button" id="IssueGC">Issue</button>
            <button type="reset" class="grey">Reset</button>
        </form>
    </div>
</div>

<div class="modal" id="addBalance">
    <div class="head">
        <span class="modalTitle">
            add balance
        </span>
        <span class="controller">
            <span class="close lnr lnr-cross"></span>
        </span>
    </div>

    <div class="main">
        <p>please enter the amount:</p>
        <form>
            <input type="hidden" id="card" />
            <input type="text" placeholder="amount" id="amount" />
            <select id="payMethod">
                <option value="">Select a payment mode</option>
                <option value="cash">cash</option>
                <option value="card">card</option>
                <option value="cheque">cheque</option>
            </select>
            <button type="button" id="addBal">Add balance</button>
        </form>
    </div>
</div>

<div class="modal" id="changeOwner">
    <div class="head">
        <span class="modalTitle">
            add balance
        </span>
        <span class="controller">
            <span class="close lnr lnr-cross"></span>
        </span>
    </div>

    <div class="main">
        <p>please enter the amount:</p>
        <form>
            <input type="hidden" id="card" />
            <input type="text" name="customer" placeholder="Search customer" class="ui-widget customerSearch"/>
            <input type="hidden" class="customer_id"/>
            <input type="checkbox" id="walkinGC" class="walkin" /><label for="walkinGC"> &nbsp; Walk in</label>
            <button type="button" id="changeOW">Add balance</button>
        </form>
    </div>
</div>