select2v4用于实时搜索-可以从下拉列表中选择或提交关键字

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

本文关键字：下拉列表选择关键字提交实时用于搜索 select2v4 更新时间：2023-09-26

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

问题

我无法拦截Enter键
按下Submit按钮时，我无法使用JQuery获取输入的键盘

我尝试了什么

我尝试将事件绑定到SELECT元素，也尝试了stackoverflow.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;
    });
});

您可以使用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>