選擇輸入類型=“文本”元素

Question

我有以下HTML / Bootstrap元素：

<div class="form-group">
  <label>Keyword:</label>
  <input type="text" class="form-control" id="keyword">
</div>

我想允許用戶在使用selectize.js在此表單中鍵入文本時選擇預定義的單詞。 如果未選擇任何單詞，則輸入值為用戶輸入的單詞。

我如何使用selectize.js做到這一點？

編輯：

關鍵是：我需要用從文檔中提取的預定義值填充這些關鍵字字段（我實際上是在做編輯器），並且如果我使用“選擇”元素而不是“輸入”，則無法使用以下項設置起始值：

$('#keyword').val();

由於這些起始值可以是隨機的，因此我無法找到解決此問題的方法。

Answer 1

您可以在初始化時使用create或createOnBlur選項。

這是selectize.js的文檔

https://github.com/selectize/selectize.js/blob/master/docs/usage.md

create允許用戶創建不在初始選項列表中的新項目。

createOnBlur如果為true，則當用戶退出字段（在輸入之外單擊）時，將創建並選擇一個新選項（如果啟用了創建設置）

Answer 2

我想出了如何做到這一點：

//enable selectize on input element and add a list of options
var $select = $('#keyword').selectize({
maxItems: 1,
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [
    {id: 1, title: 'value1'},
    {id: 2, title: 'value2'},
    {id: 3, title: 'value3'}
],
create: true,
});

//store selectize object to variable
var selectize = $select[0].selectize;
//add new option and set the value to new option
selectize.addOption({id:4, title: 'value4'});
selectize.setValue(4, false);

現在，加載頁面后的默認選項是'value4'，並且可以根據需要選擇其他選項。