Select2搜索框

我有以下功能的格式問題。正如你在下面看到的，它主要工作，只是搜索框的格式不是我想要的（我想複製鍵入Twitter Bootstrap功能）：Select2搜索框

用戶可以在搜索框中輸入書名，從搜索框下拉列表中選擇（通過ajax）選擇書籍，然後選擇一本書。在下拉菜單中選擇一本書後，表格中將顯示書籍信息。就像這樣：

enter image description here

我的問題是，選擇2自動更改搜索輸入的格式（添加所選項目周圍的CSS搜索框）。在這裏看到：

enter image description here

問題

我知道這不是什麼選擇二是指用於，但我想有搜索框的值是「軌道」，與我輸入時完全一樣（第一張截圖）。 如何保持常規輸入格式？

詳情：

這裏是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' 
    })

來源

2013-02-19 alex

你可以把選擇2成多選模式 - 這將使它看起來像你想要的常規文本字段。使用maximumSelectionSize：1選項將選擇限制爲單個項目。使用原始html控件上的「更改」事件來填充表單。

來源

2013-02-19 19:28:03

感謝您的回答。正如問題中所述，並在屏幕截圖中看到，填充表單已經可行。唯一不起作用的是搜索框的樣式：我希望「圖書搜索字段」在屏幕截圖2中顯示爲與屏幕截圖1中相同（不帶「標籤」樣式，並且具有相同的關鍵字）。我怎麼做？ – alex 2013-02-19 19:50:42

在format_item添加一行

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

對於多選

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

它將使而不是添加所選項目的搜索詞。

來源

2013-11-12 14:45:05

回答

相關問題