Question

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

问题

我无法拦截回车键
按下“提交”按钮

我做了什么

我尝试将事件绑定到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;
    });

});

Answer 1

您可以使用ajax调用来保存last关键字的值。并使用选择事件来访问所选数据。并使用change事件来捕获回车键。

＆＃13;

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;
}

＆＃13;

select {
  width: 100%;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: