JQuery UI——自动完成组件

来源：互联网发布：微信 java api 编辑：程序博客网时间：2024/06/05 22:58

当用户在文本框输入数据时，可以使用自动完成组件向其提供建议数据

一.让输入框支持自动完成

<html><head>    <title></title>    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script></head><style type="text/css"></style><script type="text/javascript">    $(function(){        var flowers=["Aster","Daffodil","Rose","Peony","Primula","SnowDrop","Poppy","Primrose","Prtuna","Pansy"];        $("#acInput").autocomplete({            source:flowers        });    });</script><body>    <form>        <div class="ui.widget">            <label for="acInput">Flower name:</label><input id="acInput" />        </div>    </form></body></html>

二.配置自动完成组件

自动完成组件选项：

appenTo：指定弹出层元素的DOM插入位置，默认是body元素
autoFocus：弹出层第一项会自动取得焦点，可直接回车取得
delay：指定按下一个键之后多长时间更新数据，默认300ms
disable：禁用文本框的自动完成
minLength：指定输入最少多少个字符后才开始自动完成菜单
position：设置弹出层相对input元素位置
source：指定弹出层的数据来源

/**使用delay、minLength、远程数据源*/<script type="text/javascript">    $(function(){        $("#acInput").autocomplete({            source:"http://node.jacquisflowershop.com/auto",            minLength:3,            delay:1000        });    });</script>

/**设置弹出层位置*/<html><head>    <title></title>    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script></head><style type="text/css"></style><script type="text/javascript">    $(function(){        var flowers = [{label:"Aster(Pruple)",value:"Aster"},            {label:"Daffodil(White)",value:"Daffodil"},            {label:"Rose(Pink)",value:"Rose"}];        $("#acInput").autocomplete({            source:flowers,            position:{                my:"left top",                at:"right bottom+20",                of:"#target",                collision:"fit"            }        });    });</script><body>    <div class="ui-widget">        <label for="acInput">Flower Name:</label><input id="acInput" />    </div>    <span id="target">Target</span></body></html>/**position属性值指定了弹出层的一系列规则*/

position函数：

my：指定弹出层的什么位置相对于目标元素
at：指定my元素的弹出层位置相对于目标元素的什么位置
of：指定弹出层的目标元素
collision：当弹出层遮住窗口时，调整弹出层位置方式

三.自动完成组件方法

close：关闭自动完成弹出菜单
destory：删除自动完成组件
disable：禁用
enable：启动
option：设置选项
“search”,value：用某个值主动触发自动完成组件，默认为用户输入参数

$("#acInput").autocomplete("search",this.id);//用按钮的id号作为启动自动完成组件的触发文字

四.自动完成组件事件

change：当文本框值发生变化且失去焦点时
close：当弹出菜单关闭时
create：自动完成组件创建完成时
focus：得到焦点时
open：弹出菜单显示时
response：所搜完成但尚未给用户看时
search：自动完成数据生成完毕之前或请求完成之前
select：当一项被选中时

1.获取选中的详细信息
ui对象的item属性保存了获得焦点的项，以此获得信息：

function displayItem(event, ui){    $("itemLabel").text(ui.item.label)}//调用displayItem时，只用写函数名即可，不用传参

2.修改搜索结果response
在数据显示给用户前，response函数提供了最后的修改机会

$("#acInput").autocomplete({    source:flowers,    response:filterResults});function filterResults(event,ui){    for(var i = 0 ; i < ui.content.length; i++){            if(ui.content[i].label == "Poney")                ui,content.splice(i,1);                //splices删除Poney选项，用户看不到此选项    }}

0 0