如何使用select2自动选择单次搜索返回
select2是一个基于jQuery的自定义选择框插件，它提供了丰富的功能和灵活的配置选项，可以用于实现自动选择单次搜索返回的功能。
使用select2自动选择单次搜索返回的步骤如下：
- 引入select2插件的CSS和JS文件。可以通过以下链接下载并引入：
- CSS文件：select2.min.css
- JS文件：select2.min.js
- 在HTML页面中创建一个select元素，并为其添加一个唯一的ID，例如：<select id="mySelect"></select>
- 使用JavaScript代码初始化select2插件，并配置相关选项。以下是一个示例代码：$(document).ready(function() {
$('#mySelect').select2({
ajax: {
url: '搜索接口URL',
dataType: 'json',
delay: 250,
processResults: function(data) {
return {
results: data.items
};
},
cache: true
},
minimumInputLength: 1
});
});
ajax选项用于配置远程搜索的相关参数，其中url指定了搜索接口的URL，dataType指定了返回的数据类型，delay指定了触发搜索的延迟时间，processResults用于处理返回的数据并返回select2可接受的格式，cache用于开启结果缓存。minimumInputLength选项指定了触发搜索的最小输入长度。
- 根据实际需求，可以通过配置其他选项来自定义select2的外观和行为，例如：
placeholder选项用于设置选择框的占位符文本。allowClear选项用于允许清除已选择的选项。dropdownAutoWidth选项用于自动调整下拉菜单的宽度。theme选项用于设置选择框的主题样式。
以上是使用select2自动选择单次搜索返回的基本步骤和示例代码。根据具体需求，可以进一步定制和扩展select2的功能。
相关·内容
在我的项目中，我广泛地使用了select2插件，但我遇到的一个问题是一个影响表单验证逻辑的bug。
var valid = 1;
$('form .required').each(function() {
if ($(this).val() == '') {
$(this).parents('.form-group').addClass('has-error');
valid = 0;
} else {
$(this).parents('.form-grou
浏览 5提问于2015-02-03得票数 0
我正在尝试自定义select2，并且当找不到项目时，我正在重写createSearchChoice以返回对象。
然后是.on('select2-selecting',，我将接受新创建的选项，并将其转换为“真实的”对象(持久化到服务器)。但是，现在创建的“临时”选项与对象不匹配，因此select2仍然将搜索词显示为选项，因为我创建了一个新的和不同的对象，并将搜索选项作为临时实体处理。
如何阻止select2从结果中追加任何先前创建的搜索选项？(理想情况下，我希望将select2从“知道”之前创建的搜索选项中清除掉)
浏览 3提问于2014-12-17得票数 1
回答已采纳
4回答
如何填写/选择一个select2搜索框(通过ajax获取结果)。
在rails项目中使用最新的version 4 of select2和最新的capybara/rspec。
在SO和其他地方有很多关于如何将Capybara与Select2 3.x一起使用的例子，而不是重写的version 4。
浏览 15提问于2015-02-27得票数 7
回答已采纳
2回答
Select2问题，
我不想放下搜索框，我想在搜索中做第一行，
我该怎么做？
如何按位置占位符搜索？代码:
<select name="search" class="box"></select>
例如图片，
$(".box").select2({
minimumInputLength: 2,
placeholder: ' Search!',
cache:true,
ajax: {
dataType: 'json'
浏览 3提问于2015-12-11得票数 0
回答已采纳
我有这样一个简单的SELECT2设置：
<select name="cat" id="cat" class="js-example-basic-single">
<option value="URL.com">Option 1</option>
<option value="URL2.com">Option 2</option>
</select>
我很好奇如何使这些选项可点击，这样一旦在搜索过程中单击或找到，它们就会立即转到v
浏览 0提问于2018-02-21得票数 2
回答已采纳
我使用两种select2，一种用于各省，另一种用于城市。我的目标是填充城市，select2从后端返回作为json返回的城市下拉。
现在，第一次调用对我有效，城市select2被正确地填充。唯一的问题是，在第二个调用(由省更改触发)中，json返回的内容不是替换select 2城市的内容，而是添加到其中的，因此我无法在添加之前了解如何清空前面的内容。
我两次都试过：
$("#city").select2({'data' : null });
和
$("#city").select2('data', null );
这里是我的ajax
浏览 2提问于2015-12-11得票数 0
回答已采纳
在用以下内容初始化select2下拉列表时，如何设置它的默认值：
$('.className').select2({
placeholder: 'Select an option',
data: dataArray
});
浏览 1提问于2017-06-08得票数 0
我试图禁用select2内部输入搜索的自动焦点，特别是在移动设备上禁用键盘弹出。但是，如文档所示的
select2不会触发本机事件。select2也不会触发事件的非本地版本，这不是一个问题，因为我们仍然可以在不破坏兼容性的情况下添加本机事件。
因此，我能做的唯一方法就是尝试将当前处于焦点状态的select2中的每个输入框都设置为“失去焦点”，但是没有运气。
$("select").select2().on("select2-open",":input",function(){
setTimeout(function(){
浏览 0提问于2018-10-11得票数 0
回答已采纳
2回答
尝试使用select2插件创建两个链接的自动填充选择字段，第一个选择包含国家名称(静态选择)，第二个显示从第一个选择中选择的国家的州，我的代码是
<select id="country" name="country" size="1" class=" form-control">
<option></option>
<option value="1">USA</option>
<option value="2">Untied K
浏览 2提问于2015-05-15得票数 8
回答已采纳
我有一系列关于jQuery Select2插件的问题(我对Select2非常陌生，只有一天的时间)：
我正在通过AJAX调用(使用Select2 2的ajax特性)获取数据，并试图找到一种添加“查看更多.”的方法。选项在下拉显示的末尾。点击“查看更多.”得带我去另一个单独的搜索页面。
如果我能够到达加载AJAX调用的OnSuccess或OnComplete事件，我就可以在下拉结果中找到相关的DIV，并附加“视图更多.”迪夫。这可能吗？
我不想使用Select2中的“自动滚动”功能。
我在Select2下拉列表旁边有一个搜索按钮，当用户在搜索框中输入一些字符时，我进行AJAX调用并显示数
浏览 9提问于2013-03-27得票数 0
回答已采纳
2回答
我使用的是Select2 3.5.1。通过这个插件，我可以成功地加载远程数据。然而，我今天在这里提出一个问题，以改进这一搜索。下面是一步一步地理解我想要做的事情：
使用远程数据加载设置Select2 (使用ajax)。
单击Select2输入并搜索某些内容。
加载将出现，几秒钟后，您将看到一个结果列表。
点击其中一个结果--结果框就会消失。
如果再次单击“搜索”框，则列表将为空，需要再次键入一些新文本才能获得结果列表。
当我们再次单击搜索框时，是否有可能在没有任何ajax调用的情况下重新显示先前搜索的结果列表？然后，如果用户删除某个字符或更改他的搜索条件，那么它将再
浏览 3提问于2014-10-20得票数 9
回答已采纳
我正在尝试使用foreach循环将数据加载到select2。
代码：
var url = "@Url.Action("Listofservices","service")";
$.get(url, function (status, val) {
$.each(status, function (i, val) {
$(".ser").select2("data", val.Name);
浏览 2提问于2018-08-16得票数 0
3回答
在我的应用程序中，我有几个表单字段，有许多选项。我遇到的问题类似于：在每次加载页面时获取和解析所有选项是昂贵的(Twig一次又一次地呈现所有选项，而客户端缓存是不可能的)。这个问题让我创建了一种通过AJAX将选项发送到浏览器的方法。相当简单的方法：
通过AJAX获取所有选项(键值)(例如，获取/countries.json)和缓存(如果可能的话)。(在这种情况下，国名不太可能经常更改)
使用select2、select2或类似的插件将选项插入到DOM中。
享受更快的形式:-)
为了防止Symfony查询所有选项(没有必要:它们是通过AJAX加载的)，在加载表单时，我将set
浏览 0提问于2016-07-25得票数 5
回答已采纳
我正在寻找一种方法来防止select2的搜索输入在select2-dropdown打开时被自动聚焦。我知道这是select2想要的默认行为--虽然这对桌面客户端来说很好，但我需要防止触发iPads软键盘的iPad出现这种行为，这不是我们想要的默认行为。
我一直在寻找这样做的选择，但没有运气。反映了我们的设置-我们使用一个简单的-element作为我们的select2功能的基础：
$('#source').select2();
浏览 2提问于2013-08-01得票数 12
1回答
我使用select2组件进行选择。
我在这里一起举了一个例子：
我想做的是：
通过select2小部件选择一项
在下面的div中显示该项
不要在搜索框中显示标签。
这个很好用。问题是，当选择一个项时，搜索框将不再显示占位符属性。
我如何告诉浏览器假设输入为空，并再次显示占位符？
浏览 0提问于2016-09-07得票数 2
我有一个使用AJAX的Select2控件--我可以搜索远程存储库并从中选择选项。不过，我想要做的是在每次AJAX搜索返回时向控件添加一个新选项，以便将该搜索词添加为新选项。
它不应该只是在搜索结果为空时添加它，而应该在每次搜索时添加它。
例如:我搜索baseball，我的AJAX搜索返回以下结果：
baseball fields
baseball games
baseball equipment
我希望显示Select2下拉列表：
baseball fields
baseball games
baseball equipment
baseball (Add As New)
希望这就像找到正确的
浏览 1提问于2015-08-10得票数 0
1回答
我正在做一个关于JAWS的项目，我返回了一个html代码 <!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<%out.print(request.getContextPath());%&
浏览 38提问于2019-03-01得票数 0
我已经集成了select2与我的活动管理员。但它不能正常工作。它只显示下拉列表，而不显示搜索选项。
我关注了以下链接：()
使用的Ruby版本: ruby-2.6.3 x86_64 Rails版本: Rails 5.0.7.2
这是我的app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .
//= require select2
//= require select2_locale_pt-BR
$( &
浏览 33提问于2019-07-05得票数 0
我想向占位符添加一个图标，如下所示
$("#tag_list").select2({
allowClear: true,
placeholder: "<i class='icon-group'></i> inout your tags...",
tags: ['a', 'b', 'c'],
});
但是它在select2中呈现纯文本，那么如何呈现占位符的html文本呢？
浏览 0提问于2013-07-27得票数 6
嗨，我有我的多选择搜索表单的问题。
参数在url urlhomepage.../search?cars=1&cars=2&cars=4中。
我不知道如何在选择的表单选项中获取参数url
<select multiple="multiple" name="cars[]" id="select2" placeholder="">
@foreach($names as $name)
<option value="{{$name->id}}">{{$name->t
浏览 12提问于2019-07-31得票数 0
1回答
我正在尝试设置select2单选下拉菜单的默认值：。
我已经让select2下拉菜单工作了。但是我不确定如何设置默认值。例如，假设值列表为- test1，test2，test3。如何将'test1‘设置为单选下拉菜单的默认值。
$(function(){
var testData = [{id:0, text:"test1"}, {id:1, text:"test2"}, {id:2, text:"test3"}];
$('#select2customdata').select2({placeholder:"Se
浏览 6提问于2014-10-14得票数 4
回答已采纳
11回答
我正在使用Select2和jQuery表单转发器()
我已经在google/so上搜索了2天，但似乎不能正常工作。
include jquery/select2.js/jquery.repeater.js
var form = $('#form');
form.find('select').select2();
form.repeater({
show: function () {
$(this).show(function(){
form.find('select').select2('destroy
浏览 6提问于2016-12-21得票数 2
WooCommerce在州和国家的发货和计费地址字段中使用select2。我希望这样做，以便当您搜索ka时，最重要的结果是Kansas，而不是Alaska。
我查看了select2的文档，发现如下：
但这个解决方案是为了当有孩子的时候。我不知道如何编辑文档中的示例，使其与WooCommerce一起工作。另一篇这样的文章建议如下：
function matchCustom(term, text) {
console.log('matcher is running');
if (text.toUpperCase().indexOf(term.toUpperCase())
浏览 1提问于2019-06-07得票数 1
回答已采纳
4回答
有在线帮助使用select2与水豚(见下面的链接)，但没有帮助，特别是就我已经看到的select2下拉字段。我尝试过各种方法，包括尝试在以下情况下填充字段:js => false (使用类似于find(:xpath, "//input[@id='product_manufacturer_id']").set "Test product manufacturer"的东西)，或者在其他select2字段上使用的解决方案的变体(参见下面提供的链接)。到目前为止，没有什么对我有用。
关于我的配置的注释：
使用select2版本3
使用水豚W
浏览 11提问于2016-12-21得票数 5
回答已采纳
1回答
我正在使用select2，但是我不能重新选择选中的项目，所以我所做的就是在选择任何项目时清除select2下拉菜单，他们有什么更好的解决方案吗？ $('#selectBox').select2('destroy').val('').select2();
浏览 5提问于2020-07-29得票数 1
回答已采纳
1回答
我正在使用"Select2 Jquery“插件。对于下拉的选择表单项，它在“选择”项中搜索，如果没有找到任何结果，将返回值如下所示：
$("#PROJECTID").select2({
allowClear: true,
minimumInputLength: 4,
**formatNoMatches: function () { return "no such a value"; },**
});
我试图在返回值中显示部分视图。我使用的是ASP.net MVC框架。如何调用操作或将部分视图显示为
浏览 0提问于2013-09-03得票数 0
4回答
我需要能够添加一个搜索框到我的多选择字段使用select2。
无论出于什么原因，当搜索框出现在单选择字段中时，对多选择字段的相同select2()调用不会添加搜索框。
var data = []; // Programatically-generated options array with > 5 options
var placeholder = "select";
$(".mySelect").select2({
data: data,
placeholder: placeholder,
allowClear: false,
浏览 10提问于2016-03-23得票数 20
回答已采纳
我正在使用Select2和Ajax来加载远程数据(建议)。
一切正常，但有一个问题:当用户只输入空格(通过按空格键)时- Ajax请求将被发送。
我如何防止这种情况发生？另外，我想在发送之前修剪一下条款。
$(".js-data-example-ajax").select2({
placeholder: "Select... ",
minimumInputLength: 3,
ajax: {
url: "/my-site/tags",
dataType: 'json',
data: functi
浏览 97提问于2016-11-06得票数 2
回答已采纳
4回答
我使用select2和ajax search.How来设置一些选项无法选择。例如，如下图所示
我在输入中写了一个“w”，但是下拉列表中的第一行不是来自ajax搜索的数据。如何设置它不能被选择或不显示它？
html代码
<select id="normalSymptom" name="normalSymptom" class="form-control select2-multiple" multiple > </select>
javascript代码
$('#normalSymptom').sele
浏览 3提问于2016-11-02得票数 0
回答已采纳
1回答
当我单击菜单之外时，我希望我的select2元素不清除搜索的术语。我已经搜索了很多这个特性，它似乎有一天是可能的，但是在4.0版本中它是吗？我也尝试过实现，但它似乎不起作用。
我的代码目前如下：
$(document).ready(function () {
function displayCurrentValue(selectedObject, currentSearchTerm) {
return currentSearchTerm;
}
$("#reference").select2({
nextSearchTerm
浏览 1提问于2015-11-04得票数 3
我正在将<input type="hidden">转换为select2 dropdown，并通过query方法向其提供数据
$('#inputhidden').select2({
query: function( query ) {
query.callback( data ); // the data is in the format select2 expects and all works well..
);
});
问题是，我需要修改ajax UI，并将两个按钮放置在搜索栏的顶部，当单击这两个按钮时，将执行se
浏览 3提问于2013-05-10得票数 48
回答已采纳
2回答
select2就像我想要的一样。当另一个字段被更改时，它加载所有远程数据并正确格式化其格式。我想在检索到的数据上添加搜索函数，即一旦数据被检索，用户就可以通过标题(result.title)搜索列表。
在下面的示例中，将检索数据，但没有过滤搜索项。重要的是，在用户必须搜索结果之前，首先加载所有远程数据。
如果我不能添加搜索功能，如何禁用搜索框？如果我设置为"minimumResultsForSearch：-1"，select2框仍然允许我搜索？
var $company2 = $(".company2");
$company2.sele
浏览 6提问于2017-11-21得票数 0
回答已采纳
如何在select2中设置值。我尝试过许多方法，但我无法让它工作，我能够在select2中实现ajax搜索。但是当我设置数据时，它就不起作用了。
代码：
$('#pin_code').select2({
dropdownAutoWidth: true,
placeholder: 'Select an option',
width: 'resolve',
delay: 250,
minimumInputLength: 4,
minimumResultsForSearch: 10,
ajax:
浏览 2提问于2021-06-09得票数 0
回答已采纳
1回答
当您使用select2 (下拉jquery框架)时，您可以使用jquery进行漂亮的下拉操作。
如您所见，单个选择框有一个单独的搜索框，但multiselect有其搜索框内联。
有没有可能在multiselect中添加一个单独的搜索框？
$(".my-dropdown").select2();
.my-dropdown{
width: 50%;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"><
浏览 1提问于2016-09-16得票数 5
我有一个ASP.net MVC项目。我所有的DropDownListFor显示为2个框，而不是1个。这是当前视图的样子：
视图应该是这样的：
以下是视图中的代码：
<div class="col-xs-12 col-sm-6 col-md-4 ">
<div class="form-group select-280">
@Html.LabelFor(model => model.HoleID)
<br />
浏览 1提问于2017-06-20得票数 0
回答已采纳
当我在select2文本框中键入或搜索任何内容时，它会显示搜索，而不会显示来自数据库的数据。我在searchProdauto上放置了断点，当编译器出现时，
searchData操作搜索数据成功，但它没有显示在select2文本框中。
这是我的家庭控制器
// GET: /Common/Home/
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult searchProdauto(string q)
{
var sear
浏览 1提问于2015-09-28得票数 2
回答已采纳
我想在这里解释清楚我的问题，
我试图执行多选择下拉过滤器，在这个多选择过滤器之前，我有一个基本的过滤器。
Am使用kartik-v下拉扩展
search.php
<?php
$status = ArrayHelper::map(Status::find()->all(),'id','status');
echo $form->field($model, 'status')->widget(Select2::classname(), [
'd
浏览 7提问于2016-02-15得票数 15
回答已采纳
标记
<select2
[data]="data"
[width]="1024"
[options]="options"
[value]="selectedData"
(valueChanged)="onTagChanged($event)">
</select2>
角4分量
onTagChanged(data: { value: string[] }): void {
console.log
浏览 3提问于2017-10-24得票数 2
回答已采纳
3回答
我正在从Twitter的typeahead.js迁移到select2。
我真正喜欢typeahead.js的一点是，选定值和搜索框出现在同一个字段中。你可以在上试试。
我想在select2中实现同样的效果。您将注意到，在select2中，“当前选定的值”与搜索框位于不同的位置。
我如何使它成为相同的元素？
浏览 0提问于2015-10-28得票数 4
4回答
更新：
我补充说：
$("#id_project").select2({dropdownParent: $(".modal-body")});
...and --这会使下拉列表被正确地放置，并且搜索可以被键入。Unfortunately...this会导致所传递的数据被清除，并且没有任何选项可供选择。
我有一个在引导模式中填充的表单，如下所示：
<form method="post" action="/dataanalytics/sparc/tasks/create/" class="js-task-create-f
浏览 1提问于2018-02-12得票数 6
我正在使用Select2在一个.NET MVC网站，让用户可以轻松地搜索和选择一个表单的项目。但是，我的用户已经询问，他们是否可以将一个项目列表粘贴到框中，而不是一个一个地搜索和选择它们。
我已经找到了有关Select2 tokenizer参数的信息，该参数允许使用自定义标记程序重载默认令牌。然而，我发现的大多数示例都是针对较早版本的Select2，并且我使用的是Version4.0。
如何允许使用ajax粘贴令牌列表来解决这些问题？
浏览 2提问于2015-12-14得票数 0
回答已采纳
4回答
我正在用做标签
我对select2有以下要求：
我需要使用select2 Ajax搜索一些标签，我还需要在select2中使用" tags“，它允许列表中没有的值(Ajax结果)。
这两种方案都是独立工作的。但是连接在一起的aJax值只会被填充。如果我们输入列表中没有的任何其他值，那么它会显示“找不到匹配项”。
我的方案是，如果用户键入列表中没有的任何新值，则允许他们创建自己的标记。
有什么办法能让这件事成功吗？
浏览 46提问于2013-01-09得票数 77
回答已采纳
我创建了模式(CollectionTest)字段，如下所示。
year: {
type: String,
label: "Year",
autoform:{
type:'select2',
options:function () {
return[{label:"2013",value:3102},{label:"2014",value:4102},{label:"2015",value
浏览 2提问于2017-04-20得票数 0
回答已采纳
在我的一些测试中，我必须确认某些select2下拉列表在设置某些标志时被禁用。为了证实这一点，我发现以下策略似乎奏效了：
Assert.True(element.GetAttribute("disabled").Equals("true"));
当我检查元素时，我看到了disabled="disabled"。我的问题是为什么从GetAttribute = "true"返回的字符串没有“禁用”？
浏览 3提问于2014-09-23得票数 10
回答已采纳
我在bootstrap4中使用yii 2.0.43。
如果我将Select2小部件配置为允许单项选择，如下面的代码所示，那么select输入上的搜索控件将不起作用。它不可编辑。
<?php
echo '<label>Roles</label>';
try {
echo Select2::widget([
'id' => 'user-roles',
'class' => 'form-control&#
浏览 6提问于2021-11-13得票数 0
2回答
我正在尝试初始化一个类，如下所示：
DllInjector mInject = new DllInjector();
但是DllInjector()给了我一个错误：“由于它的保护级别而无法访问”，所以我查看了这个类，发现它有一个单例：
public static DllInjector GetInstance
{
get
{
if (_instance == null)
{
_instance = new DllInjector();
}
浏览 0提问于2017-07-10得票数 1
1回答
使用标准的select2下拉框，其中填充了数据库调用中的名称列表，是否有方法搜索搜索区域内的隐藏项？
示例：
Select2框显示给最终用户"Charlie“，但实际上选项值持有"Charlie (22)”。我希望use能够搜索22，但在默认情况下不会显示给最终用户。
提亚
浏览 4提问于2014-04-09得票数 3
回答已采纳
1回答
我正在使用plugIn Select2，我想在CSS中进行2次自定义：
更改单个选择的大小ScrollBar。(我希望调整搜索输入的大小-宽度:80%-，并使较大的滚动条-occupy保留搜索栏的空间-)
更改禁用的CSS样式。
有人知道他们各自的ClassNames是什么吗？我在寻找，但什么也没找到。
(例如：.select2-搜索输入{}；它用于搜索输入)
PD:谁知道在哪里可以找到Select2的所有CSS类？
谢谢。
浏览 0提问于2017-05-05得票数 0
回答已采纳
在我的应用程序中，我已经集成了一个JQuery数据表。但是，我想添加一个内联编辑器。有一个内联编辑工具，但这不是免费的。
因此，我在Google上搜索了另一个内联编辑器，并找到了一个开源的lib ，它提供内联编辑。我已经在datatable中成功地实现了它，并且运行良好。
但是，我想将添加到下拉列表中，因为我的应用程序datatable下拉包含许多值。因此，我无法轻松地选择值。Select2插件在下拉列表中提供了一个搜索选项，我使用它可以很容易地找到确切的选项。然而，没有这种功能。有人能帮我添加Select2插件吗？
电流下降
所需的下拉(带有搜索选项)
浏览 0提问于2019-04-28得票数 2
无法键入Select2下拉输入搜索字段()
我已经发现了许多列出的问题，其中提到了相同的问题，但对我没有任何作用()。我不能键入Select2下拉输入搜索字段在模型对话框中使用jQuery。顺便说一句，我可以从下拉列表中选择值罚款。尝试插入表索引:0，但没有结果。
代码：
$.ajax({
type: "POST",
url: "<?php echo $myScripts; ?>",
data: { id1: "get-release-dropdown-html", id100: "<?php e
浏览 6提问于2017-10-03得票数 23
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
