ajax智能提示+textbox動態產生下拉框

來源:互聯網
上載者:User
<div class="searchwellist">快捷查詢:<select id="searchSelect" runat="server"><option value="1" selected="selected">按內管碼</option><option value="2">按標記碼</option></select></div>             <div class="searchwel" id="search_div"><input type="text" id="fastsearchTxt" value="輸入個體編碼或內管編碼" class=".namelist"   onfocus="if(value=='輸入個體編碼或內管編碼'){value=''}" onblur="if(value==''){value='輸入個體編碼或內管編碼'}"/></div>

下面是引用的js檔案

$(document).ready(function () {    $("#fastsearchTxt").keyup(function () {//ajax擷取資料庫查詢得到的資料        var data = $("#fastsearchTxt").val();        var num = $("#searchSelect option:selected").val();        $.ajax({            type: "POST",            url:"AjaxSearch.aspx",            data:'data='+data+'&num='+num,            success: function (message) {                $("#fastsearchTxt").beDropdownlist(message);            }        });    });});(function ($) {    $.fn.beDropdownlist = function (data) {        //預設值        var defaults = {            data: ['nothing']        };        var options = { data: data };        options = $.extend(defaults, options); //使得參數覆蓋        var bindevent = function(o) {            var tmpid = "tmpselector_" + $(o).attr("id"); //產生臨時的id            if ($("#" + tmpid).length > 0) {                $("#" + tmpid).remove();                //return; //退出,不在繼續下去            }            var datas = options.data.split(','); //資料來源            //此處style中設定為absolute             var html = "<div id='" + tmpid + "' style='border: 1px solid grey;max-height: 150px;position:absolute;text-align: left; overflow: auto;background:white;width:153px;'><ul class='ui-menu'>";            //動態產生一個div,內含li元素            for (var item in datas) {                html += "<li>" + datas[item] + "</li>";            }            html += "</ul></div>";            var left = $(o).offset().left;            var top = $(o).offset().top + $(o).height() + 4;            var finalize = function() {                $("#" + tmpid + " li").unbind('click'); //取消事件綁定                $("#" + tmpid).remove();            };            //設定該div的寬度,位置等。            $("#" + tmpid).width($(o).width() + 100);            $("#" + tmpid).offset({ top: top, left: left });                           $("#" + tmpid).remove();            $("#search_div").append(html);                        //$("#" + tmpid).mouseleave(function (){ finalize(); });            $("#" + tmpid+" li").click(function() {                $(o).val($(this).text());                finalize();                if (fn != undefined) {                    fn(); //調用傳進來的函數。                }            });        };            this.each(function() { //由於jquery的選擇符可能匹配多個對象,所以需要用each,對每個匹配的元素做操作。                    if ($(this).is(":text") == true) {                        //$(this).keyup(function() {                            bindevent($(this)); //設定要做的內容                        //});                    }                });    };})(jQuery);

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.