DIY的JS自动完成的插件

154 阅读 0 评论 102 点赞

我是靠谱客的博主单薄保温杯，这篇文章主要介绍DIY的JS自动完成的插件，现在分享给大家，希望可以做个参考。

最近又花了点时间写了个在一般项目中比较常用的插件，就是JS自动完成选择的插件。该插件是基于jQuery1.6的利用于AJAX传递输入框值请求数据，支持能过配置的自定义处观位置与大小的调整；自定义事件触发；自定义请求返回数据的绑定；支持上下方向键选择等功能。经反复测过，支持目前所有流行的浏览器。

如果页面中存在一个文本框，如：

复制代码

1
2
3
<body>
    <input id="Text1" />
</body>

详细JS调用代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#Text1").automatically({
    event: "keyup",                // 控件触发事件名(默认：keyup)
    Offset: 0,                     // 选项层偏移位置像素(默认：0，不偏移)
    maxWidth: 0,                   // 选项层宽度(默认：0，与当前对象保持一样的宽度)
    maxHeight: 180,                // 选项层高度(默认：1800)
    itemTag: "span",               // 填充选项的标签(默认：span)
    paremt: "@paremt",             // 事件时替换为当前输入的参数名称(默认：@paremt)
    url: "/Home/GetText",          // 发送请求的地址(必填)
    data: "name=@paremt",          // 发送到服务器的数据(必填)
    success: function (data) {     // 请求成功后的回调函数(必填)
        var htmlText = "";
        if (data !== null && data.length !== 0) {
            htmlText += "<div>";
            $.each(data, function (i, n) {
                htmlText += "<span value='" + n[1] + "'>" + n[0] + "</span>";
            });
            htmlText += "</div>";
        }
        return htmlText;
    },
    callback: function (thisObj) { // 完成选择后回调函数
    }
});