JQuery UI之Autocomplete(1)入门程序

2022-06-27 15:04:03

1、Autocomplete的主要属性：
source：即为指定智能提示下拉框中的数据来源，支持三种类型。
Array，主要用于本地化数据提供，支持两种格式：字符串数组 [ "Choice1", "Choice2" ]及标签和值属性的Json格式数组 [ { label: "Choice1", value: "value1" }, ... ]
String，用于ajax请求的远程地址链接，返回Array或Json格式字符串。
Function，回调函数，最具有灵活性的一种方式，可用于返回任何数据源方式来实现自动完成，其中包含两个参数request，response通过request.term 来获取用户输入的值,通过response(argument)来对获取的数据源进行显示。
autoFocus：当智能提示框出现时，是否自动选中第一项，默认为false，即不选中。
delay：在按键后执行搜索的延时，默认为300ms。
disabled：是否禁用自动完成功能，默认为false。
minLength：触发自动完成功能需要输入的最小字符数量。

2、Autocomplete还提供了一些有用的方法：
close()：关闭智能提示选择框。　　
destroy()：销毁智能提示选择框，将其所产生的元素完全删除，使其恢复至初始状态。
disable()：禁用自动完成功能。
enable()：开启自动完成功能。

3、主要事件包括：
change(event, ui)：当值改变时发生，ui.item为选中的项。
close(event, ui)：当智能提示框关闭时发生。
create(event, ui)：当智能提示框创建时发生，可以在此事件中，对外观进行一些控制。
focus(event, ui)：当智能提示列表任意一项获得焦点时发生，ui.item为获得焦点的项。
open(event, ui)：当智能提示框打开或更新时发生。
response(event,ui)：在搜索完成后智能提示框显示前发生，可以在此事件中对显示项进行处理。
search(event, ui)：在开始请求之前发生，可以在此事件中返回false来取消请求。
select(event, ui)：当智能提示框中任意一项被选中时发生，ui.item为选中的项。

4、Autocomplete程序入门

首先引入相关的css和js文件，HTML代码

<link href="../css/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script>

<script type="text/javascript" src="../js/jquery-ui.js"  ></script>

<label for="language">搜索：</lable>

<input id="language" name="language" type="text">

这里采用的是本地数据，js代码如下：

$("#language").autocomplete({

        source: [ 'Chinese','English','Spanish','Russian','French','Japanese','Korean','German']

    });

当输入c时的效果如下：

5、source使用标签和值属性演示

HTML不变，js代码如下：

$("#language").autocomplete({

        // 静态的数据源，根据label属性进行显示或模糊匹配，当给输入框设置value属性值

        source: [

                 { label: "Chinese", value: 1 },

                 { label: "English", value: 2 },

                 { label: "Spanish", value: 3 },

                 { label: "Russian", value: 4 },

                 { label: "French", value: 5 },

                 { label: "Japanese", value: 6 },

                 ]

    });

在输入框输入c时，此时输入框对应的值是value的值

注意：如果数据太多可以添加滚动效果：

 <style>

  .ui-autocomplete {

    max-height: 200px;

    overflow-y: auto;

    /* 防止水平滚动条 */

    overflow-x: hidden;

  }

  </style>

码农公寓

相关文章