Select2搜索框

Question

我有以下功能的格式问题。正如你在下面看到的，它主要工作，只是搜索框的格式不是我想要的（我想复制键入Twitter Bootstrap功能）：

用户可以在搜索框中输入书名，从搜索框下拉列表中选择（通过ajax）选择书籍，然后选择一本书。在下拉菜单中选择一本书后，表格中将显示书籍信息。就像这样：

我的问题是，选择2自动更改搜索输入的格式（添加所选项目周围的CSS搜索框）。在这里看到：

问题

我知道这不是什么选择二是指用于，但我想有搜索框的值是“轨道”，与我输入时完全一样（第一张截图）。 如何保持常规输入格式？

详情：

这里是CoffeeScript的代码，我到目前为止（其特点是图像的异步加载，并且选择的格式）：

jQuery -> 

    get_image = (unique_id, image_url) -> 
    img = $("<img />").load(-> 
     $(".#{unique_id} .typeahead_photo_wrapper").html(img) 
    ).error(-> 
     $(".#{unique_id} .typeahead_photo_wrapper").html("No preview") 
    ).addClass('typeahead_photo').attr({src: image_url}).fadeIn(500) 


    format_item = (book) -> 
    console.log book 
    itm = '' 
    itm += "<div class='typeahead_wrapper #{book.isbn}'>" 
    itm += "<div class='typeahead_photo_wrapper'>" 
    itm += "<div class='typeahead_photo'>...</div>" 
    itm += "</div>" 
    itm += "<div class='typeahead_labels'>" 
    itm += "<div class='typeahead_primary'>#{book.title}</div>" 
    itm += "<div class='typeahead_secondary'>#{book.author}</div>" 
    itm += "</div>" 
    itm += "</div>" 

    get_image(book.isbn, book.image) 
    itm 


    update_with_item = (item) -> 
    keywords = $("#learning_item_book_search").val() 
    # console.log item 

    $("#new-book #learning_item_unique_identifier").val(item.isbn) 
    $("#new-book #learning_item_source").val(item.source) 
    $("#new-book #learning_item_name").val(item.title) 
    $("#new-book #learning_item_description").val(item.description) 
    $("#new-book button").focus() 
    item.title 



    retrieve_books = (data) -> 
    books = [] 
    $.each data, (i, item) -> 
     books.push(
     id: item.id 
     isbn: item.isbn 
     title: item.title 
     author: item.authors 
     description: item.description 
     image: item.volume_info.imageLinks.smallThumbnail 
    ) 
    books 


    $("#learning_item_book_search").select2({ 
    minimumInputLength: 2 
    tags: true 
    ajax: 
     url: "/raw_items/fetch_books" 
     dataType: 'json' 
     quietMillis: 200 
     data: (term, page) -> 
     query: term 
     results: (data, page) -> 
     return {results: retrieve_books(data)} 
    maximumSelectionSize:1 
    formatResult: format_item 
    formatSelection: update_with_item 
    formatInputTooShort: (term, minLength) -> 
     "Searching book on Google books" 
    dropdownCssClass: 'typeahead' 
    }) 

Answer 1

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

Answer 2

在format_item添加一行

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

对于多选

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

它将使而不是添加所选项目的搜索词。