Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

资源分类

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

more>>
相关栏目
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
alertify.js
jQuery酷炫的各种消息提示插件
官网 GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网 GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网 GitHub
threesixty.js
360度产品图片预览jQuery插件
官网 GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网 GitHub
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主。All Rights Reserved. 网站备案号:蜀ICP备13022973号

手机预览