入力フィールドに特定のクラスがある場合にのみjQueryオートコンプリートを適用します

Question

ドロップダウンボタンが付いたブートストラップ入力エレメントがあります。検索オプションは、ドロップダウンメニューから選択することができます：見積もりによる検索、文字による検索。オプションが選択されると、関連するクラスがinput要素に追加され、現在のクラスが削除されます。

入力フィールドに「文字で検索」オプションが選択されているときにクラス「文字」を持つ場合にのみ、オートコンプリート機能を適用しようとしています。私は '引用で検索'オプションが選択されているときにオートコンプリートリストを表示したくありません。

クリックイベントハンドラを使用して自動補完機能をトリガする必要がありますか？「文字による検索」オプションが選択されている場合は、

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