文本框，智能提示信息

1 样式

 <style>
        .fm {
            clear: both;
            position: relative;
            z-index: 297;
        }

        .bdsug {
            position: absolute;
            width: 265px;
            background: #fff;
            border: 1px solid #817f82;
            top: 65px;
            left: 11px;
            height: auto;
            text-align: left;

        }

            .bdsug li {
                width: 248px;
                color: #000;
                font: 14px arial;
                padding: 0 8px;
                position: relative;
                cursor: default;
                margin: 1px;
                border-bottom: 1px solid #e7e7e7;
                line-height: 35px;
                font-family: sans-serif;
            }

                .bdsug li.bdsug-s {
                    background: #ebebeb;
                    
                }
    </style>

2  页面信息

    <div class=" fm" >      
                <table><tr>
                    <td><input type="search" name="search" id="searchDrug" autocomplete="off"/></td>
                    <td ><button type="button" class="btn" id="a_SearchDrug">查询</button></td>
               </tr></table>
            </div>
        </div>
        <div class="bdsug" id="div_ulContent">
            <ul id="ulDrug1">
            </ul>      
        <ul id="ulDrug" data-role="none" style="min-height:500px;"></ul>
    </div>

3  js信息

 <script type="text/javascript">    
        $(function () {
            $("#div_ulContent").hide();
            $('#searchDrug').keyup(function () {
                var sugList = $("#ulDrug1");
                var text = $(this).val();
                if (text.length > 1) {
                    $.ajax({
                        type: 'post',
                        url: "/DrugSearch/GetDrugInfo",
                        data: { drugName: text },
                        success: function (data) {
                            var strHtml = "";
                            if (data.length > 0) {
                                $("#div_ulContent").show();
                                for (var i = 0; i < data.length; i++) {
                                    strHtml += "<li>" + data[i] + "</li>";
                                }
                                sugList.html(strHtml);
                                $("#ulDrug1").find("li").each(function () {
                                    $(this).click(function () {
                                        $("#searchDrug").val($(this).text());
                                        $("#div_ulContent").hide();
                                    });
                                    $(this).mouseover(function () {
                                        $(this).css('background-color', '#F9F9F9');
                                    });
                                    $(this).mouseout(function () {
                                        $(this).css("background-color", "");
                                    });
                                });

                            }
                            else {
                                $("#div_ulContent").hide();
                            }
                        }
                    });
                }
                else {
                    $("#div_ulContent").hide();
                }
            });

            $(function () {
                $(window.top.window).click(function () {
                    $("#div_ulContent").hide();
                })
                $("body").click(function () {
                    $("#div_ulContent").hide();
                })
               
            });

        });
       
    </script>