智能提示框设计 仿携程

最近项目中有需求如下：

输入品名后，弹出对话框显示以前采购类似品名的产品的采购记录；样式图如下：

输着输入的品名进行模糊查找和精确查找，并可以在弹出的采购记录进行选择，并把相应项赋值给相应文本框或者列表框.

html代码如下：

 <div id="itab" style="display: none; width: 532px; margin-left: 25px; position: absolute;">
        <div style="background-image: url('../images/dg_01.png'); background-repeat: no-repeat;
            width: 530px; height: 32px;">
        </div>
        <div id="itabch" style="width: 530px; background-image: url('../images/dg_02.png');
            height: 200px; background-repeat: repeat-y;">
        </div>
        <%--<div style="background-image: url('../images/dg_05.png'); width: 530px; height: 52px;" >
        </div>--%>
        <img src="../images/dg_05.png" style="width: 530px; height: 52px;" border="0" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="circle" coords="494,23,21" href="#" onclick="CloseDoc();" />
        </map>
    </div>

js代码如下：

<script language="javascript" type="text/javascript">
        $(function () {
            $("#txtProductName").keyup(function () {
                var product = $("#txtProductName").val();
                $.post("../Ashx/GetProductInfo.ashx", { "productName": product }, function (data) {
                    if (data == "false") {
                    }
                    else {
                        $("#itab").css("left", "0px");
                        $("#itab").css("top", "110px");
                        $("#itab").css("display", "block");
                        $("#itabch").html(data);
                    }
                })
            });
        });
        function test(r) {
            var vfouces = r.id;
            var vindex = parseInt(vfouces.substring(1));
            var tab = document.getElementById("tjj");
            var rows = tab.rows;
            for (var i = 0; i < rows.length; i++) {
                if ((vindex + 1) == i) {
                    var quantity = rows[i].cells[6].innerHTML;
                    var unitPrice = rows[i].cells[5].innerHTML;
                    var approve = rows[i].cells[4].innerHTML;
                    var supplyName = rows[i].cells[3].innerHTML;
                    var purity = rows[i].cells[2].innerHTML;
                    var productName = rows[i].cells[1].innerHTML;
                    $("#txtSupplyName").val(supplyName);
                    $("#txtProductName").val(productName);
                    $("#txtPurty").val(purity);
                    $("#txtPrice").val(unitPrice);
                    $("#txtCount").val(quantity);
                    $("#itab").css("display", "none");
                }
            }
        }
        function CloseDoc() {
            $("#itab").hide();
        }

        function ClickPage(e) {
            var vPageButton = e.id;
            var product = $("#txtProductName").val();
            var pageindex = parseInt($("#pageindex").text())-1;
            var pageCount = parseInt($("#pageCount").text());
            if (vPageButton == "first") {
                pageindex = 0;
            }
            if (vPageButton == "pre") {
                if (pageindex == 0) {
                    return;
                }
                pageindex = pageindex - 1;
            }
            if (vPageButton == "next") {
                if (pageindex + 1 == pageCount) {
                    return;
                }
                pageindex = pageindex + 1;
            }
            if (vPageButton == "last") {
                pageindex = pageCount - 1;
            }
            $.post("../Ashx/GetProductInfo.ashx", { "productName": product, "pageindex": pageindex }, function (data) {
                if (data == "false") {
                }
                else {
                    $("#itab").css("left", "0px");
                    $("#itab").css("top", "110px");
                    $("#itab").css("display", "block");
                    $("#itabch").html(data);
                }
            })
        }
    </script>

ashx代码：

 context.Response.ContentType = "text/plain";
        OrderInfo orderBll = new OrderInfo();

        if (string.IsNullOrEmpty(context.Request.Form["productName"]))
        {
            context.Response.Write("false");
            return;
        }
        string productName = context.Request.Form["productName"];
        DataTable dt = orderBll.GetOrderDetailsByProductName(productName);
        if (dt == null || dt.Rows.Count <= 0)
        {
            context.Response.Write("false");
            return;
        }
        int rowsCount = dt.Rows.Count;//总行数
        int pageSize = 4;//每页4条记录
        int pageCount = rowsCount % 4 == 0 ? rowsCount / 4 : rowsCount / 4 + 1;
        int pageIndex = 0;
        if (!string.IsNullOrEmpty(context.Request.Form["pageindex"]))
        {
            pageIndex = Convert.ToInt32(context.Request.Form["pageindex"]);
        }
        int start = pageIndex * 4;
        int size = (pageIndex + 1) * 4;
        if ((rowsCount - (pageIndex + 1) * 4) < 0)
        {
            size = rowsCount;
        }
        string str = "<table id=\"tjj\" cellspacing=\"1\"><tr class=\"itable_title\"><th>选择</th><th>品名</th><th>规格</th><th>供应商</th><th>评价</th><th>报价</th><th>数量</th></tr>";

        for (int i = start; i < size; i++)
        {
            string product = dt.Rows[i]["productname"].ToString();
            string purity = dt.Rows[i]["purity"].ToString();
            string supplyname = dt.Rows[i]["supplyname"].ToString();
            string unitprice = dt.Rows[i]["unitprice"].ToString();
            string quantity = dt.Rows[i]["quantity"].ToString();
            string appraise = dt.Rows[i]["appraise"].ToString();
            str += string.Format("<tr class=\"tr3\"><td><input type=\"radio\" name=\"radio\" onclick=\"test(this)\" id=\"r{0}\"/></td>", i);
            str += string.Format("<td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td></tr>", product, purity, supplyname, appraise, unitprice, quantity);
        }
        str += string.Format("<table align=\"center\" style=\"margin-left:-26px;border:1px solid #e7e7e7;line-height:25px;height:35px;background:#ffffff;text-align:center;\"><tr><td colspan=\"5\"><input id=\"first\" class=\"btn\" type=\"button\" onclick=\"ClickPage(this);\" value=\"首页\"/>&nbsp;<input id=\"pre\" type=\"button\" class=\"btn\" value=\"上一页\" onclick=\"ClickPage(this);\"/>&nbsp;<input id=\"next\" type=\"button\" class=\"btn\" value=\"下一页\" onclick=\"ClickPage(this);\"/>&nbsp;<input id=\"last\" type=\"button\" class=\"btn\" value=\"尾页\" onclick=\"ClickPage(this);\"/>&nbsp;[第<span id=\"pageindex\">{0}</span>页/共<span id=\"pageCount\">{1}</span>页]</td></tr></table>", pageIndex + 1, pageCount);
        str += "</table>";
        context.Response.Write(str);

从html代码中，可以看到弹出的div实质上是由三部分组成，

分别下面三张图片：

（1）dg_01.png

（2）dg_02.png

（3）dg_05.png

只是对图片2进行y轴平铺。