美文网首页jquery
jquery-autocmplete

jquery-autocmplete

作者: 该昵称注册中 | 来源:发表于2018-03-09 10:25 被阅读0次

    autocomplete
    自动完善输入框
    $("#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 ) {} );

    //扩展??

    相关文章

      网友评论

        本文标题:jquery-autocmplete

        本文链接:https://www.haomeiwen.com/subject/nekpfftx.html