我从选择迁移到select2插件,因为它对我来说效果更好,但与选择相比,它的文档非常差.谁能告诉我应该使用哪个选项来使select2搜索功能过滤以搜索词开头的词(并且不包含在中间).

让我们说select2字段有这些选项:香蕉,苹果,菠萝.

当用户输入“app”(或苹果)时,只应返回apple(因为它是唯一以apple开头的单词).现在,它返回苹果和菠萝.

经过大量搜索后,我发现需要使用一些自定义匹配器,但到目前为止都是如此.

解决方法

Select2提供了有关如何使用自定义匹配器功能将搜索词匹配到搜索结果的 an example in the documentation.给出的示例是这个确切的用例.
function matchStart (term,text) {
  if (text.toupperCase().indexOf(term.toupperCase()) == 0) {
    return true;
  }
 
  return false;
}
 
$.fn.select2.amd.require(['select2/compat/matcher'],function (oldMatcher) {
  $("select").select2({
    matcher: oldMatcher(matchStart)
  })
});
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

<select style="width: 200px">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

jquery-select2 – select2搜索 – 仅匹配以搜索词开头的单词的更多相关文章

  1. jquery select2的使用心得(推荐)

    下面小编就为大家带来一篇jquery select2的使用心得(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)

    select2是一款jQuery插件,是普通form表单select组件的升级版。 接下来通过本文给大家介绍jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页),需要的的朋友参考下吧

  3. Vue.js监听select2的值改变进行查询方式

    这篇文章主要介绍了Vue.js监听select2的值改变进行查询方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  4. Select2在使用ajax获取远程数据时显示默认数据的方法

    今天小编就为大家分享一篇Select2在使用ajax获取远程数据时显示默认数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  5. php – 以Jquery select2形式发布POST

    所以我使用的是Select2插件,在表单中发布多个选项时遇到问题.我可以选择多个选项,但只能传递一个:在我的PHP页面上,当我选择多个选项后var_dump:我只得到一根绳子,即:我需要转到隐藏的输入格式吗?答案是在name属性之后加入[],这与插件几乎没有关系.

  6. php – 如何通过URL传递变量的多个值

    我正在构建一个应用程序,而且我遇到了某个问题.我正在尝试传递一个具有多个值的变量.所以我的网址将如下所示:问题是我不知道如何做到这一点.变量用于从数据库中检索数据.我正在使用PHP而没有Javascript.任何帮助都会很棒!

  7. 动态添加项目到使用AJAX的jQuery Select2控件

    我有一个jQuerySelect2控件使用AJAX来填充:AJAX链接到可能选项的数据库,并且您可以看到需要两个字符的输入。相同的确切代码适用于非AJAXSelect2框。我尝试了各种替代方法,如使用$。remove()只会删除原来的字段,但使Select2控件保持不变。任何想法如何a)动态添加一个选项到使用AJAX的Select2控件;或b)完全删除一个Select2控件,以便它可以以编程方式添加回来?编辑我发现另一个问题,显示如何删除select2元素,使用.select2。我更喜欢能够添加选项比销毁

  8. select2 ajax 设置默认值,初始值

    在做功能的时候需要修改数据,修改数据时需要显示原始值.但是在select2的时候显示原始值是一个非常非常非常非常非常要命的难题.研究了3个小时,最后使用$.ajax重新加载原始值.并显示.重点是下面的代码,再次加载默认值.赋值.主要是在select控件添加上option.具体是ajax加载的还是直接后台用代码生成的.都可以..最后用$select2.trigger;渲染到界面上..就可以了.

  9. php – 无法从select2搜索结果中选择一个结果

    我正在使用我的搜索框中的select2.我从我的网址获取结果,但我无法从中选择一个选项.我想使用’product.productName’作为选择后显示的文本.有没有我错过的东西,或者我所犯的任何错误.我已经包括select2.css和select2.min.js,jquery.js这是我的resut_object您缺少结果数据的id属性.Select2pluginswantsanidfieldo

  10. select2,利用ajax高效查询大数据列表可搜索、可分页

    select2是一款jquery插件,是普通form表单select组件的升级版。那么,现在让我们开始一段select2的奇幻之旅吧!设置class为js-data-example-ajax,页面加载时对该组件进行select2的初始化。href属性为ajax提供后台检索的URL。第二步、select2组件化,注释写得很详细了哦第三步、Java端接收参数并返回结果集,不用我强调,这步很重要接下来,把关键的源码贴出来,可能和你的项目不吻合,但可以参考。调查select2的源码可以知道。

随机推荐

  1. jquery-plugins – 是否可以使用猫头鹰旋转木马实现循环/无限轮播?

    我正在使用猫头鹰旋转木马,它的工作完美,除了它不支持循环/无限滚动.我没有搜索google和stackoverflow的想法,没有运气.有没有人在猫头鹰旋转木马上实现圆形/无限滚动?

  2. jQuery动态输入字段焦点

    我想使用以下jQuery向我的页面动态添加一个输入字段:在这样做之后,我希望输入字段具有闪烁的文本光标的焦点,所以我想在创建后立即输入.有人可以告诉我我该怎么办?

  3. jquery – 为什么$(window).height()这样错了?

    我试图获取当前浏览器的视口高度,使用但我得到的价值观太低了.当视口高度高达850px时,我从height()获取大约350或400像素的值.这是怎么回事?

  4. jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

    例如这样但是由于明显的原因,这不行.我可以说这个吗?

  5. 创建一个jQueryUI 1.8按钮菜单

    现在jQueryUI1.8已经出来了,我正在浏览更新,并且遇到了新的Buttonwidget,特别是SplitButtonwithadropdown的演示之一.这个演示似乎表明Buttonwidget可以在这里创建一个下拉菜单.作为讨论的问题,我想知道使用这个新的Button小部件来创建一个下拉菜单有什么方法.干杯.解决方法您必须在按钮下方列出一个列表,方式类似于此处为自动完成提供的演示:http

  6. 灰色divs使用JQuery

    我试图使用这个代码:为了淡出一大堆名为MySelectorDiv的div,唯一的是,它只会淡出第一个而不是所有的div,为什么呢?

  7. 使用jQuery动态插入到列表中

    我有两个订单列表在彼此旁边.当我从一个列表中选出一个节点时,我想按照字母顺序插入到另一个列表中.抓住的是我想要把一个元素放在另一个列表中,而不刷新整个列表.奇怪的是,当我插入到右边的列表中,它工作正常,但是当我插入到左边的列表中时,顺序永远不会出来.我也尝试将所有内容读入数组,并将其排序在一起,以防止children()方法没有按照显示顺序返回任何东西,但是我仍然得到相同的结果.这是我的jQuer

  8. 没有回应MediaWiki API使用jQuery

    我试图从维基百科获取一些内容作为JSON:但我没有回应.如果我粘贴到浏览器的地址栏,就像我得到预期的内容.怎么了?解决方法您需要通过添加&callback=?来触发具有$.getJSON()的JSONP行为?在querystring上,像这样:Youcantestithere.没有使用JSONP,你正在击中same-originpolicy,阻止XmlHttpRequest获取任何数据.

  9. jQuery Ajax请求每30秒

    我有这段代码,但是有些人在我的网站上的值可能会改变.我需要每30秒钟更新一次#financediv.这可以做吗解决方法您可以将代码放在单独的函数中,如下所示:然后每30秒建立一个定时器调用该函数:祝你好运!总结以上是DEVMAX为你收集整理的jQueryAjax请求每30秒全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. jquery – keypress事件在IE和Chrome中不工作,但在FF工作

    任何想法为什么会这样发生?我通常认为Chrome会更加宽容代码?这是我的按键键.我错过了什么吗?右图();和leftimage();是应该工作的功能,因为我在其他地方使用这些功能谢谢您的帮助!

返回
顶部