zoukankan      html  css  js  c++  java
  • autocomplate 学习

    方法一 :【使用插件】

     //  联想功能 stat
            function cselstreet() {
                var name = "";
                //$("#txtname").keyup(function () {
                //    name = $("#txtname").val();
                //    alert(name);
                //});
                $("#txtaddre").flushCache();
                $("#txtaddre").autocomplete("getAutoCom.aspx?test=" + name + "", {
                    minChars: 0,    //自动完成激活之前填入的最小字符
                     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' onclick='btna("sp" + item.Cid + "");'>";
    str = str + " <div class='hehe' style='150px;background:#9a8181;color:white;'>";
    str = str + "<span id='sp" + item.Cid + "'>" + item.Cname + item.Cid + "</span>";
    str = str + " </div> <div style='height:2px;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="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='100px;'>
    <span>aaaaaa</span>
    </div>
    <div style='height:2px;100px;'></div>
    </a>-->
    
    
    </div>
    </body>
    View Code
  • 相关阅读:
    Yii Framework 开发教程: 总结
    code first 如何创建索引字段
    Entity Framework 使用 Left Join
    如何查看IIS并发连接数
    c# List<int> 转 string 以及 string [] 转 List<int>
    linq中如何在join中指定多个条件
    关于学习的感悟
    c# 的访问修饰符是private 还是 internal?
    C# 与 .Net 3.5 高级程序设计(第四版) 读书笔记(一)
    解决Excel 提示向程序发送命令时出现错误
  • 原文地址:https://www.cnblogs.com/hanxiaofei/p/9066969.html
Copyright © 2011-2022 走看看