只有當它具有某個類時纔將jQuery自動完成應用於輸入字段

Question

我有一個帶有下拉按鈕的引導程序輸入元素。搜索選項可以從下拉菜單中選擇：按引用搜索，按字符搜索。當選擇一個選項時，相關類將被添加到輸入元素中，並且當前類將被刪除。

我試圖將自動完成功能應用到輸入字段，只有當它有類'字符' - 當'按字符搜索'選項已被選中。我不想在選擇「按報價搜索」選項時顯示自動完成列表。

當我選擇'按字符搜索'選項時，是否需要使用click事件處理程序觸發自動填充功能？

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