覆蓋Selectize下拉列表中的默認選擇

我最近修改了一個網頁，用Selectize單項選擇替換非用戶友好的搜索控件。覆蓋Selectize下拉列表中的默認選擇

但我有一個小UI的煩惱。當你點擊控件然後嘗試輸入新的選擇時，什麼都不會發生;它仍然有默認選項。您首先必須按Backspace鍵刪除默認選擇，然後然後您可以輸入新的搜索。

如何在不需要按Backspace的情況下立即覆蓋默認選項進行打字？

以下是一個演示這一問題的簡短的HTML例子：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Selectize Example</title> 
     <link rel="stylesheet" href="Selectize/css/selectize.css"> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script type="text/javascript" src="Selectize/js/standalone/selectize.js" type="text/javascript"></script> 
    </head> 
    <body> 
     <select name="Manufacturer" id="Manufacturer" class="selectize"> 
      <option value="ALL" selected>All Manufacturers</option> 
      <option value="1">Acme Corp.</option> 
      <option value="2">Contoso Ltd.</option> 
      <option value="3">Electronic, Inc.</option> 
     </select> 
     <script type="text/javascript"> 
     $(".selectize").selectize({create: false}) 
     </script> 
    </body> 
</html>

來源

2016-02-12 dan04

我在jsfiddle上玩這個，似乎唯一（最簡單和最快）的方法是清空焦點上的輸入，並將其設置回缺省值，如果沒有選擇/輸入。仍然是一個便宜的解決方案，無論如何... – phaberest

我這樣做是在旅途中，它肯定需要改進，但至少它按預期工作。

編輯你的JavaScript如下：

$(".selectize").selectize({ 
    create: false, 
    onDropdownOpen: function(dropdown) { 
     var that = $(dropdown).prev().find('.item'); 

     // If the default option is selected, we empty the div acting as input. 
     if(that.data('value') == 'ALL') { 
      that.html(''); 
     } 
    }, 
    onDropdownClose: function(dropdown) { 
     var that = $(dropdown).prev().find('.item'); 

     // If nothing was selected, we restore initial value 
     if(that.data('value') == 'ALL') { 
      that.html('All Manifacturers'); 
     } 
    }, 
});

我做了一個小的jsfiddle也check it。

這是相當自我解釋，無論如何它檢查下拉列表顯示時選擇的值，然後再次消失時，只有選定的值是默認值時才執行邏輯。

來源

2016-02-12 21:18:35 phaberest

出於某種原因，'that.html（''）'禁用搜索功能。但改變這兩行以使用'this.clear'和'this.setValue'讓它再次運行。感謝您指點我正確的方向！ – dan04

很高興你解決了;） – phaberest

就在最近，我使用了selectize.js v0.12.2（使用Django表單和初始選擇選項從該表單中設置）並且有一個非常類似的問題：選擇框始終使第一個選項成爲其默認選定選項並始終在初始化時顯示默認選擇的一個。然後，單個項目選擇並不重要，因爲當我們選擇另一個選項時，默認選項將消失，但對於多項選擇，這是一個煩惱，我們必須點擊退格刪除默認選擇的選項。

我已經找到了解決辦法：在腳本中設置items:null：

$(".selectize").selectize({ 
 
    create: false, 
 
    maxItems: 3, 
 
    plugins: ['remove_button'], 
 
    items: null, 
 
    delimiter: ',', 
 
    persist: false, 
 
});

順便說一句，你可以設置selectize佔位符，例如在HTML文件中直接設置它：<select name="Manufacturer" id="Manufacturer" class="selectize" placeholder="Select a manufacturer...">。只要沒有選擇的選項，該佔位符文本將被顯示。

希望這有助於任何有類似問題的人。

來源

2016-07-19 09:12:50

覆蓋Selectize下拉列表中的默認選擇

回答

相關問題