title: Select2 search box
body: <p>I have a formatting issue with the following feature. As you'll see below, it mostly works, just the formatting of the search box is not what I want (I want to replicate the typeahead Twitter Bootstrap feature):</p>
  
  <p>A user can enter a book title in a search box, get a selection of books to chose from (through ajax) in the dropdown under the searchbox, and select a book. Upon selection of a book in the dropdown, a form is filled up with the book information. Just like so:</p>
  
  <p><img src="https://i.stack.imgur.com/s5Xzp.png" alt="enter image description here"></p>
  
  <p>My problem is that select2 automatically changes the format of the search input (adds css around the selected item in search box). See here:</p>
  
  <p><img src="https://i.stack.imgur.com/5aXEj.png" alt="enter image description here"></p>
  
  <p><strong>Question</strong></p>
  
  <p>I know it's not exactly what Select2 is meant to be used for, but I'd like to have the search box value to be "rails", appearing exactly the way it was when I typed it (first screenshot). <strong>How do I keep a regular input format?</strong></p>
  
  <p><strong>Details:</strong></p>
  
  <p>Here is the coffeescript code I have so far (it features asynchronous loading of the pictures, and formatting of the selection):</p>
  
  <pre><code>jQuery -&gt;
  
    get_image = (unique_id, image_url) -&gt;
      img = $("&lt;img  /&gt;").load(-&gt;
        $(".#{unique_id} .typeahead_photo_wrapper").html(img)
      ).error(-&gt;
        $(".#{unique_id} .typeahead_photo_wrapper").html("No preview")
      ).addClass('typeahead_photo').attr({src: image_url}).fadeIn(500)
  
  
    format_item = (book) -&gt;
      console.log book
      itm = ''
      itm += "&lt;div class='typeahead_wrapper #{book.isbn}'&gt;"
      itm += "&lt;div class='typeahead_photo_wrapper'&gt;"
      itm += "&lt;div class='typeahead_photo'&gt;...&lt;/div&gt;"
      itm += "&lt;/div&gt;"
      itm += "&lt;div class='typeahead_labels'&gt;"
      itm += "&lt;div class='typeahead_primary'&gt;#{book.title}&lt;/div&gt;"
      itm += "&lt;div class='typeahead_secondary'&gt;#{book.author}&lt;/div&gt;"
      itm += "&lt;/div&gt;"
      itm += "&lt;/div&gt;"
  
      get_image(book.isbn, book.image)
      itm
  
  
    update_with_item = (item) -&gt;
      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) -&gt;
      books = []
      $.each data, (i, item) -&gt;
        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) -&gt;
          query: term
        results: (data, page) -&gt;
          return {results: retrieve_books(data)}
      maximumSelectionSize:1
      formatResult: format_item
      formatSelection: update_with_item
      formatInputTooShort: (term, minLength) -&gt;
        "Searching book on Google books"
      dropdownCssClass: 'typeahead'
    })
  </code></pre>