Select2 окно поиска

Question

У меня проблема с форматированием со следующей функцией. Как вы увидите ниже, в основном это работает, просто форматирование окна поиска не является тем, что я хочу (я хочу реплицировать функцию Twitter-Bootstrap типа headhead):

Пользователь может ввести название книги в поле поиска , получите выбор книг для выбора из (через ajax) в раскрывающемся списке под поисковой системой и выберите книгу. После выбора книги в раскрывающемся списке форма заполняется информацией о книге. Так же, как так:

Моя проблема заключается в том, что Выбор2 автоматически изменяет формат ввода поиска (добавляет Css вокруг выбранного элемента в поле поиска). Смотрите здесь:

Вопрос

Я знаю, что это не совсем то, что Выбор2 предназначен для использования, но я хотел бы иметь значение окна поиска, чтобы быть «рельсы», появляясь точно так, как это было, когда я набрал его (первый снимок экрана). Как сохранить стандартный формат ввода?

Детали:

Вот код 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 в multiselect mode - это сделает его похожим на нужное текстовое поле. используйте maximumSelectionSize: 1 вариант для ограничения выбора на один элемент. используйте событие «change» в исходном элементе управления html для заполнения формы.

Answer 2

В format_item добавить строку

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

Для MULTISELECT

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

Это будет держать слово для поиска вместо добавления выбранного элемента.