.net 搜索联想词
思路:
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
分类:
js,jQuery
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析