Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
Seedance 2.0
字节跳动新一代AI视频生成模型全面解析
扣子Coze
职场AI,就用扣子
必火AI
数字人一站式创作平台
LiblibAI
一站式AI内容创作生成平台,原创AI模型分享社区
3387游戏盒子
提供热门折扣手游,助你轻松畅玩各种类型的游戏
宝塔服务器面板
简单好用的服务器运维面板
闪电玩
H5游戏官方平台,提供好玩的网络游戏
星月写作
人工智能写作助手
购物快捷导航
一站式解决网购需求的智能平台
硅云优惠券
领先的基础云计算服务提供商,PHP云虚拟主机第一品牌

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

jQuery-Autocomplete

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://www.devbridge.com/sourcery/components/jquery-autocomplete/
GitHub:https://github.com/devbridge/jQuery-Autocomplete
网站描述:一个简单的,容易的,可定制的自动完成功能插件
访问官网
GitHub

autocompleter是一个简单的,容易的,可定制的自动完成功能插件,支持缓存。  能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。


自动完善输入框

$("#input").autocomplete('option','appendTo',"#catheBuffe");
$("#input").autocomplete('option','delay',500);


放到对象里面

$("#input").autocomplete({
    appendTo:'#catheBuffe',   //挂载元素 如果没有指定就会去找父级‘ui-front’类 有加这个类上 没有就加到body上
    autoFocus:true,        //弹出框打开时  自动获取焦点 默认false
    delay:50,              //按键发生时和执行搜索之间的延迟 0对本地数组更具响应性,对远程数据产生大量负荷 性能较差
    disabled:false,        //是否禁用自动完成功能 默认false 
    minLength:1,           //默认1 用户在执行搜索前所输入的数字 0对本地少量数据具有响应性
    position:{ my: "left top", at: "left bottom", collision: "none" }, 
    //自动填充菜单对于输入框的位置 默认已经写 也可以指定其它的元素定位
    source: Array/String/Function
    //Array:用于本地数据["choose1","choose2"] or [{label:'choose1',value:'value1'},{label:'choose2',value:'value2'}]
       //label 为显示的数据 value为选中后填充到输入框的值 二者也可以指定一个值 相互公用
    //String:指定一个返回JSON数据的URL资源 也可以支持跨域
       //需要注意的是 autocomplete不会对结果过滤 但是可以把输入参数传给后台 在后台过滤 
       //例:设置为"http://example.com" 当用户输入'foo'时,会发送get请求'http://example.com?term=foo'数据本身也可以返回和Array一样的结构
    //Function 回调 最灵活,可以把任何数据源连接到自动完成,包括JSONP,包含两个参数
       //1:request 请求对象,指向当前文本的输入值,request.term为输入值
       //2:response 回调,它需要一个参数:向用户建议的数据。 这些数据应该根据所提供的术语进行过滤,
          //并且可以采用上述任何一种简单的本地数据格式。 提供自定义的源回调来处理请求期间的错误是非常重要的。
          //即使遇到错误,您也必须始终调用回复回调。 这确保了小部件始终具有正确的状态 
})

方法
close();
$( ".selector" ).autocomplete( "close" );
关闭打开的自动完成菜单,结合搜索方法有用
destroy();
$( ".selector" ).autocomplete( "destroy" );
完全删除自动完成功能。 这会将元素返回到它的预初始状态。
disable()
$( ".selector" ).autocomplete( "disable" );
禁用自动完成
enable()
$( ".selector" ).autocomplete( "enable" );
开启禁用的自动完成
instance()
$( ".selector" ).autocomplete( "instance" );
检索自动完成的实例对象。 如果元素没有关联的实例,则返回undefined。
option(optionName)
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
var options = $( ".selector" ).autocomplete( "option" );
获取当前与指定的optionName关联的值。
option( optionName, value )
设置与指定的optionName关联的自动完成选项的值
$( ".selector" ).autocomplete( "option", "disabled", true );
$( ".selector" ).autocomplete( "option", { disabled: true } );

search( [value ] )
$( ".selector" ).autocomplete( "search", "" );
如果事件未被取消,则触发搜索事件并调用数据源。 
可以通过类似于选择框的按钮在单击时打开建议。
当不带参数调用时,使用当前输入的值。
可以使用空字符串调用,minLength:0显示所有项目。

事件
//当选中值被修改时触发
change( event, ui )
$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});
$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );
//当菜单被隐藏时被触发 不是每一个事件都会触发
close( event, ui ) 
$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});
$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );
//自动填充完成创建时触发。
create( event, ui )
$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});
$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );
//将焦点移至某个项目(未选中)时触发。
focus( event, ui )
//建议菜单打开或更新时触发。
open( event, ui )

//搜索完成后触发,在显示菜单之前。 用于本地处理建议数据,
//其中不需要自定义源选项回调。 
//搜索完成后,始终会触发此事件,即使由于没有结果或禁用自动填充而导致菜单不会显示。
response( event, ui )

//在执行搜索之前触发,在满足minLength和delay之后。 如果取消,则不会启动请求,也不会建议任何项目。
search( event, ui )

//当从菜单中选择一个项目时触发。 默认操作是将文本字段的值替换为所选项目的值。
select( event, ui )
$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );
完整版的
$('.autoCom-brokers-decl').autocomplete({
            delay: 10,
            minLength: 1,
            autoFocus: true,
            source: function(request, response){
                common.queryBrokers('i', request.term, request.term, function(data){
                    data = data.rows || [];
                    //注意 如果要返回特定的 要自己过滤出合适的数据
                    $.each(data, function(){
                        var self = this;
                        self.label = self.brokerExportCode + ',' + self.brokerExportName;
                        self.value = self.brokerExportName;
                    });
                    response(data);
                });
            },
            select: function(event, ui){
                var $this = $(this);
                $this.parent().find('input:hidden').val(ui.item.brokerExportCode);
            },
            change: function(event, ui){
                if(!ui.item){
                    $(this).parent().find('input:hidden').val('');
                }
            },
            messages: {
                noResults: '',
                results: function() {}
            }
        })
            .bind('blur', function(){
                var $this = $(this),
                    value = $this.val(),
                    msg = "请填写正确值";

                if(value != '' ){
                    common.queryBrokers('i', value, value, function(data){
                        if(data.status != 1 || data.rows.length == 0){
                            $.addErrorMsg($this, msg);
                        }
                    });
                }
            });

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/1735

更多»
热门资源
jquery插件库
收集最全最新最好的jQuery插件
官网
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网
GitHub
Waterfall.js
瀑布流无限加载插件
官网
GitHub
Raty
一个非常棒的jQuery 评分插件
官网
GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网
GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网
GitHub
jcarousel
jQuery轮播图插件
官网
GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网
GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网
GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网
GitHub
lazyload.js
jquery图片懒加载插件
官网
GitHub
类似于jQuery-Autocomplete的资源
FooTable
高级的响应式表格jQuery插件
官网
GitHub
isotope
过滤和排序神奇布局插件
官网
GitHub
messenger
一个JS信息提示框
官网
GitHub
Garlic.js
基于jquery实现的自动保存表单插件
官网
GitHub
mgGlitch.js
一款能够模拟显示器故障效果的jQuery插件
官网
GitHub
Raty
一个非常棒的jQuery 评分插件
官网
GitHub
qTip2
精致的jQuery提示信息插件
官网
GitHub
imagesloaded
Jquery图片延迟加载插件
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网 All Rights Reserved. 提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。