select 2 search not working code example

Example 1: select2 server side

$('#payment_method').select2({
	placeholder: 'Select a option',
	ajax: {
			url: 'ajax_get_url',
            dataType: 'json',
            type: 'GET',
            processResults({ data }) {
				return {
					results: $.map(data, function (item) {
						return {
							text: item.name,
                            id: item.id,
                            }
						})
					}
				}
			}
		});

Example 2: enforcefocus select2 modal

// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Example 3: select2 search not working

Just remove tabindex="-1" from the modal

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">
  
  
  ############### TO ############################
  
  <div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">