Question

我有一个带有下拉按钮的Bootstrap输入元素。可以从下拉菜单中选择搜索选项：按引号搜索，按字符搜索。选择选项后，相关类将添加到input元素中，并删除当前类。

我尝试将自动填充功能应用于输入字段，只有当它具有类＆＃39;字符＆＃39; - 按字符搜索＆＃39;选项已被选中。我不希望在引用搜索时显示自动填充列表。选项已被选中。

我是否需要使用点击事件处理程序触发自动完成功能 - 当按字符搜索＆＃39;选择了哪个选项？

我的 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');
});

仅当jQuery自动完成具有某个类时才将其应用于输入字段

1 个答案: