У меня проблема с форматированием следующей функции. Как вы увидите ниже, это в основном работает, просто форматирование поля поиска - это не то, что мне нужно (я хочу воспроизвести функцию начальной загрузки Twitter Bootstrap):
Пользователь может ввести название книги в поле поиска, получить выбор книг на выбор (через ajax) в раскрывающемся списке под полем поиска и выбрать книгу. При выборе книги в раскрывающемся списке форма заполняется информацией о книге. Вот так:
Моя проблема в том, что select2 автоматически изменяет формат ввода поиска (добавляет css вокруг выбранного элемента в поле поиска). Посмотреть здесь:
Вопрос
Я знаю, что это не совсем то, для чего предназначен Select2, но я бы хотел, чтобы значение поля поиска было «рельсы», которое выглядело именно так, как было, когда я его набирал (первый снимок экрана). Как сохранить обычный формат ввода?
Подробности:
Вот код 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'
})