Coffeescript 选择2搜索框

我有以下功能的格式问题。正如您将在下面看到的，它基本上是有效的，只是搜索框的格式不是我想要的（我想复制typeahead Twitter引导功能）：

用户可以在搜索框中输入图书标题，在搜索框下的下拉列表中（通过ajax）选择要选择的图书，然后选择图书。在下拉列表中选择一本书后，表格中将填写该书的信息。就这样:

我的问题是select2会自动更改搜索输入的格式（在搜索框中的选定项周围添加css）。请看这里：

问题

我知道Select2的用途并不完全相同，但我希望搜索框的值为“rails”，与我键入它时的显示方式完全相同（第一个屏幕截图）如何保持常规输入格式？

详细信息：

以下是我到目前为止的coffeescript代码（它的特点是图片的异步加载和选择的格式化）：

jQuery->
获取图片=（唯一的图片id，图片url）->
img=$（”
控制台日志
itm=''
itm+=“”
itm+=“”
itm+=“…”
itm+=“”
itm+=“”
itm+=“#{book.title}”
itm+=“#{book.author}”
itm+=“”
itm+=“”
获取图像（book.isbn，book.image）
itm
使用_item=（item）->
关键词=$（“#学习#项目(书籍)搜索”）.val（）
#console.log项
$（“#新书#学习#项目(唯一)标识符”）.val（item.isbn）
$（“#新书#学习#项目#来源”）.val（item.source）
$（“#新书#学习#项目#名称”）.val（项目.标题）
$（“#新书#学习#项目#说明”）.val（项目.说明）
$（“#新书按钮”）.focus（）
项目名称
检索书籍=（数据）->
书籍=[]
$。每个数据（i，项）->
书。推(
id:item.id
国际标准书号：item.isbn
标题：item.title
作者：item.authors
description:项目名称.description
图像：item.volume\u info.imageLinks.small缩略图
)
书
$（“#学习#项目(书籍)搜索”）。选择2({
最小输入长度：2
标签：真的
阿贾克斯：
url:“/raw\u items/fetch\u books”
数据类型：“json”
安静百万：200
数据：（术语，页码）->
查询：术语
结果：（数据，第页）->
返回{results:retrieve_books（data）}
最大选择大小：1
formatResult:格式化\u项
formatSelection:使用\u项更新\u
FormatInputToShort：（术语，最小长度）->
“在谷歌图书上搜索图书”
dropdownCssClass:“提前键入”
})

您可以将select2设置为多选模式-这将使其看起来像您想要的常规文本字段。使用maximumSelectionSize:1选项将选择限制为单个项目。使用原始html控件上的“更改”事件填充表单。

在

格式化项目中添加一行

$("#learning_item_book_search").select2('val', '')

多选

$("#learning_item_book_search").select2('val', [])

它将保留搜索词，而不是添加所选项目。
谢谢您的回答。如问题中所述和屏幕截图中所示，填充表单已经起作用。唯一不起作用的是搜索框的样式：我希望“图书搜索字段”在屏幕截图2中与屏幕截图1中显示的相同（没有“tag”样式，并且使用相同的关键字）。我该怎么做？
$("#learning_item_book_search").select2('val', [])