zoukankan      html  css  js  c++  java
  • 20151217jqueryUI--自动补全工具

    自动补全(autocomplete),是一个可以减少用户输入完整信息的 UI 工具。一般在输
    入邮箱、搜索关键字等,然后提取出相应完整字符串供用户选择。
    一. 调用 autocomplete()方法

    $('#email').autocomplete({
    source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
    });
    

      二. 修改 autocomplete()样式
    由于 autocomplete()方法是弹窗, 然后鼠标悬停的样式。 我们通过 Firebug 想获取到悬停
    时背景的样式,可以直接通过 jquery.ui.css 里面找相应的 CSS。

    //无须修改 ui 里的 CSS,直接用 style.css 替代掉
    .ui-menu-item a.ui-state-focus {
    background:url(../img/ui_header_bg.png);
    }
    

      注意:其他修改方案类似。

    三. autocomplete()方法的属性
    自动补全方法有两种形式: 1.autocomplete(options), options 是以对象键值对的形式传参,
    每个键值对表示一个选项; 2.autocomplete('action', param), action 是操作对话框方法的字符
    串, param 则是 options 的某个选项。


    $('#email').autocomplete({
    source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
    disabled : false,
    minLength : 2,
    delay : 50,
    autoFocus : true,
    });
    

      

    $('#email').autocomplete({
    position : {
    my : 'left center',
    at : 'right center'
    }
    });
    

      四. autocomplete()方法的事件
    除了属性设置外, autocomplete()方法也提供了大量的事件。 这些事件可以给各种不同状
    态时提供回调函数。 这些回调函数中的 this 值等于对话框内容的 div 对象, 不是整个对话框
    的 div。

    $('#email').autocomplete({
    source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
    disabled : false,
    minLength : 1,
    delay : 0,
    focus : function (e, ui) {
    ui.item.value = '123';
    },
    select : function (e, ui) {
    ui.item.value = '123';
    },
    change : function (e, ui) {
    alert('');
    },
    search : function (e, ui) {
    alert('');
    },
    });
    

      

    //关闭自动补全
    $('#email').autocomplete('close');
    //禁用自动补全
    $('#email').autocomplete('disable');
    //启用自动补全
    $('#email').autocomplete('enable');
    //删除自动补全
    $('#email').autocomplete('destroy');
    //获取自动补全 jQuery 对象
    $('#email').autocomplete('widget');
    //设置自动补全 search
    $('#email').autocomplete('search', '');
    //获取某个 options 的 param 选项的值
    var delay = $('#email').autocomplete('option', 'delay');
    alert(delay);
    //设置某个 options 的 param 选项的值
    $('#email').dialog('option', 'delay', 0);
    

      五. autocomplete 中使用 on()
    在 autocomplete 的事件中,提供了使用 on()方法处理的事件方法。

    $('#reg').on('autocompleteopen', function () {
    alert('打开时触发! ');
    });
    

      



  • 相关阅读:
    [leetcode]Merge Intervals
    ffmpeg错误隐藏框架分析
    [置顶] Hash查找,散列查找
    VS2008LINK : fatal error LNK1000: Internal error during IncrBuildImage
    HDU1257:最少拦截系统(LIS)
    ubuntu系统使用dnw下载程序
    ubuntu系统使用minicom终端操作说明
    uboot显示logo的方式
    在XC2440的uboot中挂载U盘,利用FAT文件系统读写U盘文件
    不知道黑片,千万别说你懂“U盘”-解读Nand Flash
  • 原文地址:https://www.cnblogs.com/xiaoduc-org/p/5055257.html
Copyright © 2011-2022 走看看