如何在搜索之前编辑 jQuery 自动完成的输入?

2024-03-15

我有一个自动完成框(出于本示例的目的,因为它是一个简单的示例)返回一个包含社会安全号码的列表。为了便于阅读,它们中有破折号。我想修改自动完成功能,以便如果我输入“123456789”或“123-45-6789”,它将在自动完成功能中找到相同的条目,而不必将两种样式添加到自动完成源中。我一直在考虑添加回调search,但我对如何实现这一目标却一无所知。

如果我使用从 AJAX 源提取的搜索,我可以简单地修剪服务器端的输入并返回我想要的任何结果。然而,为了速度起见,我已将所有数据预先加载到 JavaScript 中,因此该选项已被排除。

基本上,我想知道如何在将自动完成输入与存储的数据进行比较之前修剪破折号(并且最好将其与也修剪破折号的存储数据的副本进行比较)。关于如何使用的文档几乎为零search:选项,所以我希望有人能提供帮助。


做到这一点的一种方法是向source http://jqueryui.com/demos/autocomplete/#option-source自动完成选项:

var ssn = ['123-45-6789', '333-44-5543', '111-34-9696', '555-99-5323'];

$("#ssn").autocomplete({
    source: function(request, response) {
        /* Remove the dashes from the search term: */
        var term = request.term.replace(/-/g, '');
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");

        response($.map(ssn, function(el) {
            /* Remove dashes from the source and compare with the term: */
            if (matcher.test(el.replace(/-/g, ''))) {
                return el;
            }
        }));
    }
});

这是发生的事情:

  1. The source选项需要一个request and response范围。基本上,你操纵request.term(将破折号替换为空字符串),然后将其与有效值列表进行比较。

  2. 然后,致电response函数具有正确的结果。本示例使用$.map http://api.jquery.com/jQuery.map/返回匹配列表,将术语与列表中的每个项目进行比较(不带“-”)。

这是一个工作示例:http://jsfiddle.net/andrewwhitaker/r4SzC/ http://jsfiddle.net/andrewwhitaker/r4SzC/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在搜索之前编辑 jQuery 自动完成的输入? 的相关文章

  • JQuery UI 菜单滚动

    我正在使用本机 jquery ui 菜单并尝试让它滚动 我发现它实际上内置了这种行为 某种程度上 我不确定这是有意还是无意 JSFiddle 演示 http jsfiddle net brombomb rn4rB HTML div ul d
  • 禁用 jQuery UI 选项卡时遇到问题

    API 表示您无法禁用活动选项卡 我认为这是问题的症结所在 我在一个 UI 选项卡中有六个选项卡 在 ajax 调用根据用户对新 UI Accordion 选择的点击来填充所有选项卡的数据后 其中一个选项卡有时会是空的 每当用户进行新选择时
  • 如何调整 jQuery UI 手风琴的高度?

    在我的用户界面中 我有一个像这样的手风琴设置 div h3 Section 1 h3 div content div More sections div 手风琴在刚形成时工作正常 并且似乎可以很好地适应每个部分内的内容 但是 如果我在 ac
  • jQuery UI:DatePicker,仅选择今天到过去的日期

    我在 jQuery UI 核心中使用 datePicker 我需要一个只能选择从过去一直到今天的日期的日期选择器 是否有捷径可寻 请注意 我使用的是 UI 核心 而不是 DatePicker 插件 我的 jQuery 调用 function
  • jQueryUI:正确删除可拖动元素

    我正在开发一个可视化编辑器 它需要用户可以根据需要添加 删除和拖动元素 每个元素都是一个div使用 jQueryUI 实现可拖动 新元素被附加到父元素上div代表工作空间 每个元素内部都有一个用于将其删除的按钮 这一切都很好 我遇到的问题是
  • 从 Jquery UI Sortable 中删除项目

    我试图找出从 JQuery UI 可排序列表中删除项目的正确方法 我创建了一个 JSfiddle 来说明我的问题 基本上 我有几个围绕 JQuery UI 可排序小部件的回调 并且我希望在从小部件中删除元素后立即执行这些回调 这样做的正确方
  • 自动完成请求/服务器响应是什么样的?

    这似乎是一个黑洞 经过一个小时的搜索jQuery用户界面 http en wikipedia org wiki JQuery UI网站 Stack Overflow 和谷歌搜索 我还没有找到如何编写的最基本信息服务器端自动完成的 向服务器传
  • JQuery 可拖动图像并保存位置

    好吧 这变得很尴尬 已经搜索并尝试了大约 5 个小时 但我只是在兜圈子 场景很简单 它是用户个人资料的标题图像 可以将其拖动到某个位置 然后将图像的顶部位置保存到数据库中 感谢 Beetroot Beetroot 的 遏制 父级 我开始关注
  • 在提交调试之前显示表单值

    如何在表单提交之前将所有表单值转储到警报框中 我有一个像这样的简单表单 我想在提交时在警报或控制台中查看表单值 我正在使用 jQuery 和 jQueryUI DIALOG 作为表单 但任何方法都可以 div title Some More
  • jQuery UI 滑动轻松同级推送

    我正在使用 jQuery UIslide切换 div 的切换效果 link click function targetDiv toggle slide direction up 1000 幻灯片是唯一具有我想要的动画的效果 本质上是 div
  • 在 jQuery UI 1.10 中的对话框标题中使用 HTML

    http jqueryui com upgrade guide 1 10 changed title option from html to text http jqueryui com upgrade guide 1 10 changed
  • 启动 jQuery UI 选项卡,没有选项卡处于活动状态且所有面板都隐藏

    我在用着jQuery UI 选项卡 http jqueryui com tabs 在一个项目中 我想知道是否有一种简单的方法可以在文档加载时隐藏所有面板 直到单击选项卡为止 默认情况下 jQuery UI 以激活的选项卡和可见的相应面板开始
  • Jquery 自动完成通配符

    我正在使用jquery ui autocomplete插件 但我注意到当它搜索时 它使用像这样的通配符 value 我正在使用邮政编码的自动完成功能 我认为这会让像这样的通配符更有意义 value 因此 当您开始输入时 它只会过滤掉以您已输
  • asp.net mvc - Ajax 刷新视图的每个元素

    希望在退出 jquery 对话框后使用 ajax 刷新当前页面 我有一个包含 foreach 循环的视图 数据是从模型中提取的 每个循环有 2 个编辑 删除按钮 当我单击 编辑按钮 时 将打开一个 jquery UI 对话框进行编辑 当我保
  • Firefox 中的 jQuery 日期选择器日历问题 [重复]

    这个问题在这里已经有答案了 在 2016 年的某些月份 我在 Firefox 移动和网络 中的 jQuery UI 日期选择器中显示了错误的日期 例如 2016 年 3 月 31 日是星期四 2016 年 4 月 1 日当然是星期五 但在我
  • 测试 jQuery UI 工具提示是否打开

    我正在尝试控制自动打开和关闭jQuery 工具提示 http api jqueryui com tooltip 如何测试工具提示的当前状态是否为打开 我正在使用所有内容的最新版本 Thanks 您可以尝试检查是否有任何课程ui toolti
  • jQuery UI 可排序和对话

    是否可以在两个列表之间拖动 jQuery UI 可排序列表项 其中一个在 jQuery UI 对话框中 另一个不在 jQuery UI 对话框中 我正在尝试创建一个对话框 用户可以将表单字段从对话框中拖到页面上的表单中 但我无法将项目拖出对
  • 在 JQuery ui 自动完成中显示图像

    我有一个带有 JQuery ui 自动完成功能的脚本 可以完美运行 有一个显示用户名字和姓氏的搜索过程 但在我的数据库中 还有用户的图片 我想将其显示在带有名字和姓氏的建议中 数据库中pic包含图片url 剧本 function searc
  • jquery ajax加载后丢失CSS

    大家知道如何解决 load Ajax 请求后的 css 问题吗 例如 如果我想从网页加载 DIV 在我的 Ajax 请求之后 container load path to div div id 我丢失了与该 div 关联的所有 css 和脚
  • jQuery UI Datepicker 奇怪的行为

    我在使用 jqueryUI 使用简单的日期选择器时遇到了一个奇怪的问题 我只想显示两个月的日历 包括上个月和当前月份 我使用了这段代码 function picker datepicker numberOfMonths 2 showCurr

随机推荐

  • iOS 9 中的 Web Audio API 失真?

    我一直在开发一个使用 WebAudio 进行声音合成的跨平台 Cordova 应用程序 最近在将手机升级到 iOS 9 2 后开始遇到音频输出失真的问题 基本上 在我的手机上运行该应用程序的三分之二中 振荡器输出会发出嗡嗡声并且声音失真 可
  • 如何使用 Pandas txt 文件读取每行中的列名

    我是Python初学者 我需要读取一个txt文件 其中每一行都有列名 列是无序的 并且并非所有列都被告知 有没有办法用 Pandas 读取这种文件 这是一个示例 3 行 email protected cdn cgi l email pro
  • 使用 JavaScript 反转添加到 DOM 的元素的顺序

    我正在用 JavaScript 制作游戏 需要事件日志 如果我攻击 它会告诉我是否击中或未击中 这是我的代码 function eventlogshow text var para document createElement p var
  • R中的并行I/O从磁盘读取文件

    我碰巧在 R 中需要读取和处理大量文件 20000 个文件 总共 40gb 我正在考虑并行读取 然而 我想到了一个关于并行化的哲学问题 也许问题是错误的 我的措辞不正确 因为我不是该主题的专家 所以请纠正我的错误 即使使用并行化 磁盘读取器
  • 创建 Python .exe 文件:py2exe 无效图像错误

    我想创建一个 exe文件 我使用 Python 2 7 3 和 wxPython 作为 GUI 我已经安装了py2exe对于Python 2 7并尝试创建一个 exe按照教程创建文件http www py2exe org index cgi
  • 使用 C# 和 XAML 在 Windows 应用商店应用程序中绑定资源文件值字符串

    我有资源文件 Strings en US Resources resw 我正在尝试绑定到该文件中的字符串 如下所示
  • 是否可以在 MAILTO 链接的正文中添加 HTML 链接[重复]

    这个问题在这里已经有答案了 我不必过多地处理 mailto 链接 但是 如果可能的话 我现在需要在邮件正文中添加一个链接 有没有办法添加链接或将打开的电子邮件更改为 html 电子邮件与文本电子邮件 就像是 a href Link text
  • 实体框架 V4:“仅代码”性能注意事项

    我即将开始一个新项目 想知道 仅代码 是否是正确的方法 我们还考虑通过设计器使用其他模型优先方法 但宁愿在 EF 设计器之外设计我的域模型 我们的域可能包含 100 多个实体 我读到大量实体可能会在一定程度上减慢 EF 的速度 即 创建上下
  • 从第 1 列中取出最小值的整行

    我有这个文件 2 1 12 2 34 1 56 1 45 3 33 2 77 1 83 2 62 3 75 3 我想像这样从第 1 列中取出最小值的整行 2 1 12 2 45 3 首先是这里 if vals 2 vals 2 gt 1 v
  • 原则 2 优先于多对一关联

    是否可以覆盖 ManyToOne targetEntity I read 这个学说文档页面 http docs doctrine project org projects doctrine orm en latest tutorials o
  • @Value -> 无法将类型“java.lang.String”的值转换为所需类型“java.lang.Integer”

    美好的一天 我正在使用 Spring 4 1 1 RELEASE 开发一个 Web 应用程序 所有 Spring 配置都是通过注释完成的 除了一件事之外它工作正常 我的项目中有一个 config properties 文件 其中包含这些行
  • 如何从 node-webkit 应用程序打开浏览器窗口?

    我有一个桌面应用程序 使用 node webkit 打包 我需要通过单击链接打开用户的默认浏览器 我在用 window open www google com 但这会打开一个新的 node webkit 窗口 而不是打开浏览器窗口 我如何打
  • JSF 视图 - 在操作上返回 null 不会更新视图

    我读过与我有同样问题的帖子JSF ViewScope 在不更新视图的操作上返回 null https stackoverflow com questions 13914594 jsf viewscope returning null on
  • UWP:PRI277:0xdef00532 - 资源“”的值冲突

    作为 Visual Studio 2017 UWP 生成过程的一部分 会运行一个名为 MakePri exe 的应用 它在我的项目中引发错误 但我不知道为什么 命令行调用是 C Program Files x86 Windows 套件 10
  • 打印文件中一行的最后一列

    我有一个不断被写入 更新的文件 我想找到包含特定单词的最后一行 然后打印该行的最后一列 该文件看起来像这样 随着时间的推移 将会添加更多 A1 B1 C1 行 A1 123 456 B1 234 567 C1 345 678 A1 098
  • Java 中的内存 OLAP 引擎 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有内存中 OLAP 切片和切块数据 Java 库 相当于 Microsoft 分析服务 特别想听听
  • 修复了页眉与页内锚点重叠的问题

    如果我在 HTML 页面中有一个非滚动标题 固定在顶部 具有定义的高度 有没有办法使用 URL 锚点 fragment部分 让浏览器滚动到页面中的某个点 但仍然尊重固定元素的高度无需 JavaScript 的帮助 http example
  • 无法在 yum 上下载 caddy 包

    我在 Amazon Linux 上使用 AWS EC2 当我尝试下载 caddy yum install caddy 时 出现以下错误 如屏幕截图所示 编辑 2022 年 11 月 19 日 A H 的回答 https stackoverf
  • 找不到所需的文件index.html - Heroku 推送错误

    我正在使用 Heroku CLI 将 React Node 应用程序推送到 Heroku 构建失败 错误为找不到所需的文件index html 我已经检查了所有文件和一切就位 不知道我错过了什么 我被困在这里一星期了 请帮我 我正在使用 H
  • 如何在搜索之前编辑 jQuery 自动完成的输入?

    我有一个自动完成框 出于本示例的目的 因为它是一个简单的示例 返回一个包含社会安全号码的列表 为了便于阅读 它们中有破折号 我想修改自动完成功能 以便如果我输入 123456789 或 123 45 6789 它将在自动完成功能中找到相同的