Поле поиска Select2

У меня проблема с форматированием следующей функции. Как вы увидите ниже, это в основном работает, просто форматирование поля поиска - это не то, что мне нужно (я хочу воспроизвести функцию начальной загрузки 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'
  })

person alex    schedule 19.02.2013    source источник


Ответы (2)


вы можете перевести select2 в режим множественного выбора, что сделает его похожим на обычное текстовое поле, которое вы хотите. используйте параметр maximumSelectionSize: 1, чтобы ограничить выбор одним элементом. используйте событие 'change' в исходном элементе управления html для заполнения формы.

person igor.vaynberg    schedule 19.02.2013
comment
Спасибо за ответ. Как указано в вопросе и видно на скриншотах, заполнение формы уже работает. Единственное, что не работает, - это стиль окна поиска: я хочу, чтобы поле поиска книги на снимке экрана 2 отображалось так же, как на снимке экрана 1 (без стиля тега и с тем же ключевым словом). Как я могу это сделать? - person alex; 19.02.2013

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

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

Для множественного выбора

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

Он сохранит поисковый запрос вместо добавления выбранного элемента.

person Ryan Muller    schedule 12.11.2013