.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