仅当输入字段具有特定的 class 时才将 jQuery 自动完成应用于输入字段

Question

我有一个带有下拉按钮的 Bootstrap 输入元素。可以从下拉菜单中选择搜索选项：按引号搜索、按字符搜索。当一个选项被选中时，相关的 class 被添加到输入元素中，当前的 class 被移除。

我尝试仅在选择class 'character'的输入字段时将自动完成函数应用于输入字段。我不希望在选择 'search by quote' 选项时显示自动完成列表。

我是否需要使用点击事件处理程序触发自动完成功能 - 当 'search by character' 选项被选中时？

我的HTML:

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Search by <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li id="quoteSearch"><a href="#">quote</a></li>
            <li id="charSearch"><a href="#">character</a></li>
        </ul>
    </div>
    <input id="searchBox" type="text" class="form-control quote" placeholder="Search by quote" aria-label="...">
</div>

我的JS文件：

$(document).ready(function(){

    // Turn search field into character search
    $("#charSearch").click(function(){
        $("#searchBox").removeAttr("placeholder");
        $("#searchBox").attr("placeholder", "Search by character");
        $("#searchBox").removeClass("quote");
        $("#searchBox").addClass("character");
    });

    // Turn search field into quote search (default)
    $("#quoteSearch").click(function(){
        $("#searchBox").removeAttr("placeholder");
        $("#searchBox").attr("placeholder", "Search by quote");
        $("#searchBox").removeClass("character");
        $("#searchBox").addClass("quote");
    });

    // Autocomplete for character search
    $(function(){
        var availableTags = ['One' , 'Two' , 'Three' , 'Four']

        $(".character").autocomplete({
            source: availableTags,
        });
    });

});

Answer 1

您需要将自动完成方法绑定到输入，并在选择其他搜索类型时取消绑定：

var availableTags = ['One' , 'Two' , 'Three' , 'Four']

$("#charSearch").click(function(){
    $("#searchBox").autocomplete({
        source: availableTags,
    });
});

$("#quoteSearch").click(function(){
    $("#searchBox").autocomplete("destroy");
    $("#searchBox").removeData('autocomplete');
});

仅当输入字段具有特定的 class 时才将 jQuery 自动完成应用于输入字段

Apply jQuery autocomplete to an input field only when it has a certain class

jquery

jquery-ui-autocomplete