select2 ajax 搜索框,修改Select2搜索框(Modify Select2 search box)

最新推荐文章于 2024-01-25 00:44:52 发布

weixin_39551554

最新推荐文章于 2024-01-25 00:44:52 发布

阅读量637

点赞数

文章标签： select2 ajax 搜索框

修改Select2搜索框(Modify Select2 search box)

我正在使用Select2控件的ajax功能异步加载选项。但是，我想更改搜索框的默认模板，以在右侧显示占位符和图标。

有没有正确的方法呢？

I am using the ajax feature of the Select2 control to load the options asynchronously. However, I would like to change the default template of the search box to have a placeholder and an icon on the right.

Is there a proper way to do that?

原文：https://stackoverflow.com/questions/36837906

更新时间：2019-12-07 19:47

最满意答案

占位符：从示例：

$(".js-example-placeholder-single").select2({

placeholder: "Select a state",

allowClear: true

});

自定义图标：

你可以使用JS附加它。只需创建一个DOM元素，将其附加到您想要的位置并使用CSS进行样式设置。当然，如果需要，您还可以添加其附加功能。

Placeholder: From the example:

$(".js-example-placeholder-single").select2({

placeholder: "Select a state",

allowClear: true

});

Custom Icon:

You can append it using JS. Simply create a DOM element, append it where you want and style it with CSS. Of course you can also add its additional functionality if needed.

相关问答

看到这个线程https://github.com/ivaynberg/select2/issues/489 ，您可以通过将minimumResultsForSearch设置为负值来隐藏搜索框。 $('select').select2({

minimumResultsForSearch: -1

});

See this thread https://github.com/ivaynberg/select2/issues/489, you can hide the search box by

...

根据select2文档： $('#id').select2('open');

应该是你需要的全部在文档中的Programmatic Access部分找到。 According to the Select2 documentation: $('#id').select2('open');

Should be all you need. Found under the Programmatic Access section in the documentation.

占位符：从示例： $(".js-example-placeholder-single").select2({

placeholder: "Select a state",

allowClear: true

});

自定义图标：你可以使用JS附加它。只需创建一个DOM元素，将其附加到您想要的位置并使用CSS进行样式设置。当然，如果需要，您还可以添加其附加功能。 http://www.w3schools.com/jsref/met_node_appendchild.asp Placeh

...

结果相当简单。类select2-selection--multiple有一个span元素select2-selection--multiple作为li的父元素。我所要做的只是添加overflow-y: auto ，并且做到了这一点。我不知道这个属性。现在，我的select2组合框看起来如下所示。对于我的进一步阅读 - w3schools中的overflow-y描述 This turned out to be fairly simple. There was a span element

...

是的，您可以使用formatResult和/或formatSelection方法实现这formatSelection 。在Select2 Docs：Templating中有一个很好的例子。在format功能中，过滤掉值的“(22)”部分并返回其前面的所有内容。在UX注释中，看到匹配显示不匹配的原因可能会很奇怪。如果这与您的用例无关，请继续。 Yep, you can achieve that using the formatResult and/or formatSelection met

...

你需要使用select2：select这样的事件 $('.project-chooser').on('select2:select', function (evt) {

window.location.href=$(this).val();

});

这是工作示例https://jsfiddle.net/yek6bkfs/ you need to use select2:select event like this $('.project-chooser').on('select2:

...

我设法让它在select2 v4.x下工作。我在js中添加了选择关闭这样的选项： JS function buildSelect2Element(selector, placeholder, url) {

var element = $(selector).select2({

theme: "classic",

placeholder: placeholder,

minimumInputLength: 3,

selectOn

...

如果你必须使用4.0.5版本，那么你有一个坏消息。通过将select2降级到版本4.0.2在jsfiddle中修复主要是版本<= 4.0.2 https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.js 尝试4.0.3以后到4.0.6-rc.1但没有运气。用select2打开问题select2＃5216 。我做了一点改动，但这与问题本身无关。 $(".select2-search__field").att

...

将以下内容添加到CSS中，确保它出现在CSS的CSS下方： .select2-drop-active{

margin-top: -25px;

}

这是一个演示jsFiddle 请注意，这将影响所有select2元素。要定位特定元素，只需调整规则的选择器以满足您的需要。 Add the following to your CSS, make sure that it appears below the CSS for select2: .select2-drop-active{

...

尝试类似的东西 $(document).ready(function () {

//called when key is pressed in textbox

$("#quantity").keypress(function (e) {

//if the letter is not digit then display error and don't type anything

if (e.which != 8 && e.which != 0 && (e.which <

...