3

次の機能でフォーマットの問題が発生します。以下に示すように、ほとんどの場合機能しますが、検索ボックスのフォーマットだけが私が望むものではありません（先行入力のTwitterブートストラップ機能を複製したい）：

ユーザーは、検索ボックスに本のタイトルを入力し、検索ボックスの下のドロップダウンで（ajaxを介して）選択する本の選択を取得し、本を選択できます。ドロップダウンで本を選択すると、フォームに本の情報が入力されます。ちょうどそのように：

ここに画像の説明を入力してください

私の問題は、select2が検索入力の形式を自動的に変更することです（検索ボックスで選択した項目の周りにcssを追加します）。ここを参照してください：

ここに画像の説明を入力してください

質問

Select2の用途が正確ではないことはわかっていますが、検索ボックスの値を「rails」にして、入力したときとまったく同じように表示したいと思います（最初のスクリーンショット）。通常の入力形式を維持するにはどうすればよいですか？

詳細：

これが私がこれまでに持っているコーヒースクリプトコードです（それは写真の非同期ロードと選択のフォーマットを特徴とします）：

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'
  })
4

2 に答える 2

2

select2を複数選択モードにすることができます。これにより、通常のテキストフィールドのように見えます。maximumSelectionSize：1オプションを使用して、選択を1つのアイテムに制限します。元のhtmlコントロールで「change」イベントを使用してフォームに入力します。

于 2013-02-19T19:28:03.377 に答える
0

行format_itemを追加します

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

複数選択の場合

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

選択したアイテムを追加する代わりに、検索語を保持します。

于 2013-11-12T14:45:05.427 に答える