方法一 ：【使用插件】
// 联想功能 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); }); }
方法二 ：【原生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>