autocomplate 学习

最新推荐文章于 2022-07-21 10:53:25 发布

weixin_33875839

最新推荐文章于 2022-07-21 10:53:25 发布

阅读量153

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/hanxiaofei/p/9066969.html

版权

方法一：【使用插件】

 //  联想功能 stat
        function cselstreet() {
            var name = "";
            //$("#txtname").keyup(function () {
            //    name = $("#txtname").val();
            //    alert(name);
            //});
            $("#txtaddre").flushCache();
            $("#txtaddre").autocomplete("getAutoCom.aspx?test=" + name + "", {
                minChars: 0,    //自动完成激活之前填入的最小字符
                width: 185,     //提示的宽度，溢出隐藏
                scrollHeight: 900,   //提示的高度，溢出显示滚动条
                matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                autoFill: false,    //自动填充
                dataType: 'json',
                mustMatch: false,    //如果设置为true,只会允许匹配的结果出现在输入框,当用户输入的是非法字符时,将被清除， Default: false
                extraParams: { Method: "SalePriceAutoComplate", username: function () { return $("#txtaddre").val() }, pid: function () { return $("#txtcounty").val() }, op: function () { return "3" }, userid: function () { return "123" } },    // 获取输入框里的值 并传到一般处理程序
                parse: function (data) {        //  将json 数据转换为 数组形式
                    var row = new Array();
                    for (var i = 0; i < data.length; i++) {
                        row[i] = {
                            data: data[i],
                            value: data[i].Cname,
                            result: data[i].Cid
                        };
                    }
                    return row;
                },
                formatItem: function (row, i, max) {
                    //显示的值
                    return row.Cname;
                },
                formatMatch: function (row, i, max) {
                    //查找匹配的值
                    return row.Cname;
                },
                formatResult: function (row) {
                    return row.Cname;
                }
            }).result(function (event, row, formatted) {
                //选中后的值

                //$("#spid").text(row.Cid);
                //$("#spname").text(row.Cname);
                $("#txtaddre").val(row.Cname);
                $("#autostreet").val(row.Cid);

                
            });

        }

View Code

https://files.cnblogs.com/files/hanxiaofei/autoJS.rar

方法二：【原生js代码】

<script>
function btna(id) {
$("#txt").val($("#" + id).text());
$("#div").hide();
}
function btnkeyup() {
$("#div").hide();
var param = {
username: $("#txt").val(),
op: 3,
pid: "310112000000"
}
$.getJSON("getAutoCom.aspx", param, function (data) {
var div = $("#div");
div.empty();

var str = "";
if (data.length > 0) {
$("#div").show();
$.each(data, function (i, item) {
str = str + "<a style='' class='mmp' οnclick='btna(\"sp" + item.Cid + "\");'>";
str = str + " <div class='hehe' style='width:150px;background:#9a8181;color:white;'>";
str = str + "<span id='sp" + item.Cid + "'>" + item.Cname + item.Cid + "</span>";
str = str + " </div> <div style='height:2px;width:100px;'></div>";

});
// div.html(str);
document.getElementById("div").innerHTML = str;
// div.html(str);
// div.text(str);
$(".mmp").each(function (index) {
$(this).hover(function () {
$(".mmp .hehe").css({ "background": "#9a8181", "color": "white", });
$(".mmp .hehe").eq(index).css({ "background": "deepskyblue", "color": "white", });

});
});
}

// div.text(str);
});
}

</script>

</head>
<body>
<input type="text" onkeyup="btnkeyup()" id="txt" value="aa" />
<div style="width:170px;max-height:180px;overflow-y:scroll;display:none;border:1px solid deepskyblue;border-bottom-left-radius:10px;" id="div">
<!--<a style='background:#ddd;' class='mmp'>
<div class='hehe' style='width:100px;'>
<span>aaaaaa</span>
</div>
<div style='height:2px;width:100px;'></div>
</a>-->


</div>
</body>

View Code

转载于:https://www.cnblogs.com/hanxiaofei/p/9066969.html

weixin_33875839

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
autocomplate 学习

方法一：【使用插件】 // 联想功能 stat function cselstreet() { var name = ""; //$("#txtname").keyup(function () { // name = $("#txtname").val(); ...
复制链接

扫一扫