select2 v4 用于实时搜索 - 能够 select 从下拉列表或提交关键字

Question

我正在构建实时搜索。在下面的示例中，我希望能够使用 Select2 搜索 GitHub 存储库。我需要能够从下拉列表中 select 存储库，浏览器应该导航到 selected 存储库。也应该可以通过按提交按钮或 Enter 键提交输入的关键字并导航到 GitHub 搜索页面并查看搜索结果在那里。

问题

我无法拦截回车键
我无法在按下提交按钮时使用 JQuery 获取输入的密码

我尝试了什么

我尝试将事件绑定到 SELECT 元素，还尝试了 whosebug.com 中的许多示例，但这些示例不起作用（可能是因为不同的 Select2 版本）。

这可能吗？

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

您可以使用 ajax 调用来保存最后一个关键字的值。并使用选择事件访问所选数据。并使用更改事件捕获回车键。

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>

select2 v4 用于实时搜索 - 能够 select 从下拉列表或提交关键字

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

javascript

jquery

jquery-select2

jquery-select2-4