Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
阿里云优惠券
卓越的云计算技术和服务提供商
腾讯云优惠券
云服务器,云数据库,CDN,域名注册等多种云计算服务
扣子Coze
创建属于你的 AI 应用,AI Agent智能办公平台
豆包AI
字节跳动旗下 AI 智能助手
即梦AI
一站式智能创作平台,即刻造梦
AiPPT
全智能AI一键生成 PPT
堆友AI
零门槛,多风格AI绘画免费生成,电商海报设计神器
蜂小推
不扣量的项目推广平台
SpeedAI
一键去重、降AIGC率、数据可视化、论文写作

资源分类

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的资源
perfect-scrollbar
轻量级的自定义滚动条jQuery插件
点击进入
GitHub
messenger
一个JS信息提示框
官网
GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网
GitHub
vex
一个高可配置的,易用的的现代对话框
官网
GitHub
vide
一个简单的以视频作为网页背景的jQuery 插件
官网
GitHub
fancyInput
jquery文本输入动画效果插件
官网
GitHub
jquery.danmu.js
jQuery弹幕插件
官网
GitHub
CardTabs
一款简单的jquery Tabs选项卡插件
官网
GitHub
目录

手机扫一扫预览

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

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