DIY的JS自动完成的插件

最新推荐文章于 2022-02-13 09:44:09 发布

程序员kenny

最新推荐文章于 2022-02-13 09:44:09 发布

阅读量1.1k

点赞数

分类专栏： Javascript/Jquery 文章标签： function callback jquery ajax 浏览器 input

本文链接：https://blog.csdn.net/kenny0613/article/details/6715865

版权

Javascript/Jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

<body>
    <input id="Text1" />
</body>

详细JS调用代码如下：

$("#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) { // 完成选择后回调函数
    }
});

实例下载地址：http://download.csdn.net/source/3545056