jQuery completer 自动输入提示

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery自动输入email、时间和域名</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e35165ce0/completer.css"/>
        <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
        <script src="/api/jq/5733e35165ce0/completer.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#auto-complete-email").completer({
                    separator: "@",
                    source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
                });
                $("#auto-complete-time").completer({
                    filter: function(val) {
                        val = val.replace(/\D/g, "").substr(0, 2);
                        if (val) {
                            val = parseInt(val, 10) || 0;
                            val = val > 23 ? 23 : val < 10 ? "0" + val : val;
                        }
                        return val;
                    },
                    separator: ":",
                    source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
                });
                var $autoCompleteDomain = $("#auto-complete-domain"), $autoCompleteGo = $("#auto-complete-go");
                $autoCompleteDomain.completer({
                    complete: function() {
                        var url = "http://www." + $autoCompleteDomain.val();
                        $autoCompleteGo.attr("href", url);
                    },
                    separator: ".",
                    source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"]
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="demo">
                <p>1、输入邮箱号:</p>
                <input type="text" id="auto-complete-email" class="input" placeholder="E-mail"/>
                <p> </p>
                <p>2、输入时间:</p>
                <input type="text" id="auto-complete-time" class="input"/>
                <p> </p>
                <p>3、输入域名:</p>
                <div class="input-group">
                    <span class="input-group-addon">www.</span>
                    <input id="auto-complete-domain" class="input" type="text" placeholder="请输入域名" autocomplete="off" />
                    <span class="input-group-btn">
                        <a id="auto-complete-go" class="btn btn-default" href="javascript:void(0);">Go!</a>
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>

  

时间: 2024-10-25 23:07:40

jQuery completer 自动输入提示的相关文章

easyui的combobox根据后台数据实现自动输入提示功能

adauhuehkek最近做项目的时候遇到一个需求,需要在录入数据的时候检索已经存在的数据记录,并从中提取相似的数据进行展示并选择,以提高录入效率,简单的说,这个功能有点像在谷歌.百度搜索框里输入一个关键字,然后自动在下边列举出与关键字相似的信息供选择.好啦,现在功能说完了,下边就直入正题,把两种方法都列出来,以供需要的人去选择使用,其实两种方法的区别之处很小,主要是在返回检索结果时调用方法不一样,一种是map(),另一种是each(),这两个方法的区别我就不说了,简单总结就是map()要从建数

eclipse取消自动输入提示

在设置Eclipse自动提示后,按a-z都会显示提示,但是我们需要键入Enter才会输入,而默认的所有都键入,非常弱智,可采用下面方法设置. 1,先找到相关的插件: window -> show view -> plug-ins 找到插件org.eclipse.jface.text,右键点击,选择import as Source Project,导入完成后,在你的workspace就可以看到这个project了2.修改代码在src/org/eclipse/jface/text/contenta

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

原文:从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

摘要: 地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现. 第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.ht

jQuery手机号码输入提示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery手机号码输入提示</title

文本框输入提示/自动完成功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>文本框输入提示/自动完成功能</ti

Jquery实现文本框输入提示

一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: 1.在jsp页面引用jquery.inputDefault.js <script src="/js/jquery.inputDefault.js" type="text/javascript"></script> 2.需要为控件增加一个自定义属

jquery autocomplete 自动补全

写在前面 autocomplete是jqueryUI里的一个插件 效果和说明可以访问这里,作用类似于搜索时的自动提示: 相信用过jQuery autocomplete 自动补全功能同学有不少,但是往往我们所对应的需求不同,有的仅仅是为了省事,敲两个字就有一堆可供选择的信息可供选择,但并不是所有需求都是这样的,我们还有这样的需求,敲两个字,将这个文字对应的实体绑定出来. 主要的参数 jQuery UI Autocomplete常用的参数有: Source:用于指定数据来源,类型为String.Ar