select2 v4 for live search - ability to select from dropdown or submit the keyword

Question

I am building live search. In my example below I want to be able to search GitHub repositories using Select2. I need ability to select a repository from dropdown and browser should navigate to the selected repository. It should be also possible to submit the entered keyword by pressing Submit button or Enter key and navigate to GitHub search page and see search results there.

THE PROBLEMS

• I can not intercept Enter key
• I can not get the entered keywoard using JQuery when pressing Submit button

WHAT I TRIED

I tried to bind events to SELECT element, also tried many examples from stackoverflow.com but the examples did not work (maybe because of different Select2 version).

Is this possible?

https://jsfiddle.net/gpson/2tyu6p9k/

$(function () {
    var $q = $('#select2');
    $q.select2({
        multiple: true,
        tags: true,
        closeOnSelect: true,
        //selectOnClose: true,
        ajax: {
            url: "https://api.github.com/search/repositories",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; },
        minimumInputLength: 1,
        templateResult: function (result)
        {
            return result.full_name;
        },
        templateSelection: function (result)
        {
            return result.full_name || result.text;
        }
    });

    $q.on('select2:selecting', function(e)
    {
        //window.location.href = '/contacts/show/' + e.params.args.data.html_url ;
        console.log( e.params.args.data.html_url );
        //console.log( $('#select2').val() );
        //$q.select2("close");
        return false;
    });

});

Answer 1

You can use the ajax call to hold the value of the last keyword. And use the selecting event to access the selected data. And use the change event to capture the enter key.

var $q = $('#select2');
var where = '';
var keyword = '';

$q.select2({
  tags: true,
  closeOnSelect: true,
  //selectOnClose: true,
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      /*get the last keyword on the ajax call*/
      keyword = params.term;
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      params.page = params.page || 1;
      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  },
  minimumInputLength: 1,
  templateResult: function(result) {
    return result.full_name;
  },
  templateSelection: function(result) {
    return result.full_name || result.text;
  }
});


$q.on('select2:selecting', function(e) {
  /*set the where during the selection process*/
  where = e.params.args.data.html_url;
});
$q.change(func);
document.getElementById('submit').onclick = function() {
  alert('submit was clicked where: ' + where + ' keyword: ' + keyword);
};

function func() {
  /*use the change event to triger the updates*/
  document.getElementById('where').innerText = where;
  document.getElementById('keyword').innerText = keyword;
}

select {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<select id="select2"></select>
<button id="submit">submit</button>
<h6>
  where
  </h6>
<p id="where">

</p>
<h6>
  keyword
  </h6>
<p id="keyword">

</p>