思路:
1.ajax请求后台方法获取数据。
2.通过jquery将请求到的数据显示在页面上。
前台
<div class="sc_con" id="bbsearch"> <input type="text" class="sc_input" id="txtName" autocomplete="off" placeholder="输入药品信息,寻找全球最低价" /> <input type="button" name="" value="立即搜索" onclick="mm()" class="sc_btn" /> <div id="bigAutocompleteContent" class="associational_word"></div> </div>
样式
<style> .associational_word { display: none; position: absolute; z-index: 100; border: 1px solid #BCBCBC; background-color: #FFFFFF; width: 841px; font-size: 15px; overflow-x: hidden; overflow-y: auto; left: 100px; line-height: 25px; } .ct { background: none repeat scroll 0 0 #eaeaea !important; } </style>
jquery
<%-- 联想词 --%> <script type="text/javascript"> $(function () { $(document).keypress(function (e) { if (e.keyCode == 13) { var val = $("#txtName").val(); window.location.href = "/JkCommerce/Index_j" + val + ".html"; return false; } }) //文本框按下回车事件 $("#txtName").keyup(function () { if (event.keyCode == 13) { mm(); }; setTimeout(function () { associationalWord(); }, 500); }); //鼠标悬停时选中当前行 $("#bigAutocompleteContent").delegate("tr", "mouseover", function () { $("#bigAutocompleteContent tr").removeClass("ct"); $(this).addClass("ct"); }).delegate("tr", "mouseout", function () { $("#bigAutocompleteContent tr").removeClass("ct"); }); //单击选中行后,选中行内容赋值到输入框中 $("#bigAutocompleteContent").delegate("tr", "click", function () { $("#txtName").val($(this).find("td").html());
var $bigAutocompleteContent = $("#bigAutocompleteContent");
if ($bigAutocompleteContent.css("display") != "none") {
$bigAutocompleteContent.find("tr").removeClass("ct");
$bigAutocompleteContent.hide();
}
}) }); function associationalWord() { $.ajax({ type: "post", url: "Default.aspx", data: { action: $("#txtName").val() }, success: function (msg) { msg = JSON.parse(msg); var cont = "<table style=‘width:100%‘><tbody>"; for (var i = 0; i < msg.length; i++) { cont += "<tr><td>" + msg[i].ProductName + "</td></tr>"; } cont += "</tbody></table>"; $("#bigAutocompleteContent").html(cont); $("#bigAutocompleteContent").show(); } }) } </script>
后台
protected void Page_Load(object sender, EventArgs e) { string method = Request.Form["action"]; if (!string.IsNullOrEmpty(method)) { GetWord(method); } } public void GetWord(string text) { //获取数据 DefaultDa defaultDa = new DefaultDa(); DataTable dataTable = defaultDa.GetWord(text); object JSONObj = (Object)JsonConvert.SerializeObject(dataTable); Response.Write(JSONObj); Response.End(); }
还需要引用下,Newtonsoft.Json