2017-02-25 9 views
0

ライブ検索でbootstrap selectを使用しています。私は常に要素を表示したいと思います。例:Boostrapから要素を除外ライブ検索

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> 
 

 
<select data-live-search="true" class="selectpicker"> 
 
     <option>mustard</option> 
 
     <option>ketchup</option> 
 
     <option>relish</option> 
 
     <option data-divider="true"></option> 
 
     <option>Add new</option> 
 
    </select>

私はいつも(検索する前に、見つかった結果としてせずに検索した後に)示すことにするオプション「新を追加」したいと思います。私はこれを行う方法を見つけることができませんでした。私が検討しているアプローチは、ロードイベントがトリガされたときに、Javascriptを使用して要素をリストに手動で追加することです。

答えて

0

CDNを使用している場合、私の場合は、これを行う方法を理解することは非常に不可能です。

ローカルからのJS & CSSファイルを使用している場合以外は、JSファイルにいくつかの設定があります。つまり、オプションがない場合、「選択されていません」と表示されます。 特定のテキストを検索し、そこから変更することができます。

プラグインのため、完全にカスタマイズすることはできません。

それは最高の答えではありませんが、それはあなたを助けるかもしれません

+0

これは、ユーザーが検索している間はうまくいかないでしょうか?たとえば、「mustard」と入力すると、「Add new」は表示されません。 – nmat

+0

OK、この場合は...ユーザーがライブ検索のデータを見つけずにAdd Newをクリックすると、新しいオプションの追加フィールドにIDを与え、ブートストラップモーダルを呼び出すと、テキストとともにモーダルが開きますそれを追加するフィールド –