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

这里的场景是，在我的几个页面上，有一个自动完成搜索字段的模态。因此，我没有给每个字段提供几个不同的ID，然后触发它们，而是使用了一个公共类，并尝试在驻留在modal with

.activeModal

类中的字段上触发

autocomplete（）

函数customerSearch（）{
$（.activeModal.customerSearch”）.autocomplete({
最小长度：1，
焦点：功能（事件、用户界面）{
event.preventDefault（）；
$（.activeModal.customerSearch”）.val（ui.item.label）；
},
来源：功能（请求、响应）{
$.ajax({
url:“/operations.php”，
数据类型：“json”，
类型：“post”，
数据：{
“请求”：“搜索客户”，
“查询”：$（.activeModal.customerSearch”）.val（），
},
成功：功能（数据）{
响应（$.map）（数据、功能（项）{
返回{
id:item.id，
标签：item.label，
值：item.value
}
}));
}
})
},
选择：功能（事件、用户界面）{
event.preventDefault（）；
$（.activeModal.customerSearch”）.val（ui.item.label）；
$（.activeModal.customer_id”）.val（ui.item.value）；
}
})
}
$（文档）.ready（函数（）{
客户搜索（）；
});

然而，这是行不通的；它没有显示任何结果。当我检查浏览器控制台时，它也没有给出任何错误

我做错了什么？我是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>

发行新礼品卡
走进
选择一种付款方式
现金
卡片
支票
问题
重置
增加余额
请输入金额：

选择一种付款方式
现金
卡片
支票
增加余额
增加余额
请输入金额：

走进
增加余额

感谢我在文档中看到的@Rory McCrossanAs编辑，您可以尝试设置此选择器的自动完成$（“.activeModal.customerSearch”）.autocomplete({，但是在刚刚加载页面的时候，我可以怀疑没有activeModal。所以使用.customerSearch selectorAgree和@AlexanderPoshtaruk在某种程度上是一致的。另外，它可能有助于查看其余的代码和HTML。我在问这个问题之前使用了它，下面是它的问题：尽管2-3个不同的字段有相同的类，autocomplete只在所有模式中的1个模式下工作。2.我只想在活动模式的字段中执行这些操作，因为如果一个模式中的1个字段有值，另一个模式中的第二个字段也包含该值！如果在打开该模式后没有更改，则提交以前分配的值！抱歉，有点混淆尽管如此，请回复。@sameermanek在此处测试：似乎正在工作（使用“网络”选项卡查看POST请求，这将在测试中显示404）感谢编辑@Rory McCrossanAs，我在文档中看到它已准备就绪，您尝试为此选择器$（“.activeModal.customerSearch”）设置自动完成。自动完成({，但是在刚刚加载页面的时候，我可以怀疑没有activeModal。所以使用.customerSearch selectorAgree和@AlexanderPoshtaruk在某种程度上是一致的。另外，它可能有助于查看其余的代码和HTML。我在问这个问题之前使用了它，下面是它的问题：尽管2-3个不同的字段有相同的类，autocomplete只在所有模式中的1个模式下工作。2.我只想在活动模式的字段中执行这些操作，因为如果一个模式中的1个字段有值，另一个模式中的第二个字段也包含该值！如果在打开该模式后没有更改，则提交以前分配的值！抱歉，有点混淆回复。@sameermanek在此处测试：似乎正在工作（使用“网络”选项卡查看POST请求，这将在测试中显示404）