autocomplate 学习

时间：2021-08-09 16:00:03

方法一 ：【使用插件】

 //  联想功能 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);

            });

        }

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' onclick='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>

相关文章