.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">@H_502_234@
        $(function@H_502_234@ () {
            $(document).keypress(function@H_502_234@ (e) {
                if (e.keyCode == 13@H_502_234@) {
                    var val = $("#txtName"@H_502_234@).val();
                    window.location.href = "/JkCommerce/Index_j" + val + ".html"@H_502_234@;
                    return false@H_502_234@;
                }
            })

            //文本框按下回车事件
            $("#txtName").keyup(function@H_502_234@ () {
                if (event.keyCode == 13@H_502_234@) {
                    mm();
                };
                setTimeout(function@H_502_234@ () {
                    associationalWord();
                }, 500@H_502_234@);
            });

            //鼠标悬停时选中当前行
            $("#bigAutocompleteContent").delegate("tr", "mouSEOver", function@H_502_234@ () {
                $("#bigAutocompleteContent tr").removeClass("ct"@H_502_234@);
                $(this).addClass("ct"@H_502_234@);
            }).delegate("tr", "mouSEOut", function@H_502_234@ () {
                $("#bigAutocompleteContent tr").removeClass("ct"@H_502_234@);
            });

            //单击选中行后，选中行内容赋值到输入框中
            $("#bigAutocompleteContent").delegate("tr", "click", function@H_502_234@ () {
                $("#txtName").val($(this).find("td"@H_502_234@).html());

　　　　　　　　　　 var $bigAutocompleteContent = $("#bigAutocompleteContent");
　　　　　　　　　　 if ($bigAutocompleteContent.css("display") != "none") {
　　　　　　　　　　 　　 $bigAutocompleteContent.find("tr").removeClass("ct");
　　　　　　　　　　 　　 $bigAutocompleteContent.hide();
　　　　　　　　　　 }

@H_502_234@            })
        });
        function@H_502_234@ associationalWord() {
            $.ajax({
                type: "post"@H_502_234@,
                url: "Default.aspx"@H_502_234@,
                data: { action: $("#txtName"@H_502_234@).val() },
                success: function@H_502_234@ (msg) {
                    msg =@H_502_234@ JSON.parse(msg);
                    var cont = "<table style='width:100%'><tbody>"@H_502_234@;
                    for (var i = 0; i < msg.length; i++@H_502_234@) {
                        cont += "<tr><td>" + msg[i].ProductName + "</td></tr>"@H_502_234@;
                    }
                    cont += "</tbody></table>"@H_502_234@;
                    $("#bigAutocompleteContent"@H_502_234@).html(cont);
                    $("#bigAutocompleteContent"@H_502_234@).show();
                }
            })
        }
    </script>

 后台

        protected void Page_Load(object@H_502_234@ sender, EventArgs e)
        {
                string method = Request.Form["action"@H_502_234@];
                if (!string@H_502[email protected](method))
                {
                    GetWord(method);
                }
        }


        public void GetWord(string@H_502_234@ text) 
        {
            //获取数据
            DefaultDa defaultDa = new@H_502_234@ DefaultDa();
            DataTable dataTable =@H_502_234@ defaultDa.GetWord(text);

            object JSONObj =@H_502_234@ (Object)JsonConvert.SerializeObject(dataTable);
            Response.Write(JSONObj);
            Response.End();
        }

 

还需要引用下，Newtonsoft.Json