Select2 selection box
I have a formatting problem with the following function. As you will see below, it mostly works, it's just that the search box formatting is not what I want (I want to replicate a Twitter-like Bootstrap function):
The user can enter the title of the book in the search box, get a selection of books to select from (via ajax) in the dropdown under the search box, and select the book. After selecting a book from the drop-down list, the form is filled with information about the book. Same:
My problem is that select2 automatically changes the format of the input search (adds css around the selected item in the search box). See here:
Question
I know this is not exactly what Select2 needs to be used for, but I would like the search field value to be "rails", which is similar to how it was when I typed it in (first screenshot). How do I keep the standard input format?
Details:
Here is the coffeescript code I have so far (it has asynchronous image loading and highlight formatting):
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'
})
source to share