选择输入类型=“文本”元素答案

【问题标题】：Selectize for input type="text" element选择输入类型=“文本”元素
【发布时间】：2017-10-05 07:27:24
【问题描述】：

我有以下 HTML/Bootstrap 元素：

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

我希望允许用户在使用selectize.js 在此表单中输入文本时选择预定义的单词。如果没有选择单词，则输入值是用户输入的单词。

如何使用 selectize.js 做到这一点？

编辑：

问题是：我需要使用从文档中提取的预定义值填充这些关键字字段（我实际上是在制作一个编辑器），如果我使用“选择”元素而不是“输入”，我无法设置开始值：

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

由于这些起始值可能是随机的，我无法找到解决此问题的方法。

【问题讨论】：

您有什么具体问题吗？如果您询问如何设置此插件，那么所有文档和示例代码都可以在您提供的链接中找到...
输入必须是文本类型是否有原因？
我已经做到了，但不是用插件，而是用ajax php和mysql数据库。我相信它也能很好地工作。
大多数示例都是针对。这是可能的还是我需要使用

标签： javascript jquery selectize.js

【解决方案1】：

您可以在初始化时使用create 或createOnBlur 选项；

这是selectize.js的文档

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

create 允许用户创建不在初始选项列表中的新项目。

createOnBlur 如果为真，当用户退出该字段（在输入之外单击）时，会创建并选择一个新选项（如果启用了创建设置）

【讨论】：

【解决方案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'，其他选项可以根据需要选择。

【讨论】：