服务器回发后,Jquery UI自动完成组合框值清除

时间:2013-03-22 16:34:49

标签: jquery combobox jquery-ui-autocomplete

我的aspx文件中有两个jquery自动完成组合框。我有一个asp.net服务器端按钮来发送值来进行一些关于所选组合框值的计算。我遇到了问题。当我单击服务器端按钮时,我在组合框中选择的值正在消失。我不希望这样。我怎么能阻止这个?我的代码如下。

    var cache = {};
    $.widget( "ui.combobox", {
        _create: function() {
            var input,
            that = this,
            wasOpen = false,
            select = this.element.hide(),
            selected = select.children( ":selected" ),
            value = selected.val() ? selected.text() : "",
            wrapper = this.wrapper = $( "<span>" )
                .addClass( "ui-combobox" )
                .insertAfter( select );

            function removeIfInvalid( element ) {
                var value = $( element ).val(),
                matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ),
                valid = false;
                select.children( "option" ).each(function() {
                    if ( $( this ).text().match( matcher ) ) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                if ( !valid ) {
                    // remove invalid value, as it didn't match anything
                    $( element )
                        .val( "" )
                        .attr( "title", value + " didn't match any item" )
                        .tooltip( "open" );
                        select.val( "" );
                        setTimeout(function() {
                            input.tooltip( "close" ).attr( "title", "" );
                        }, 2500 );
                        input.data( "ui-autocomplete" ).term = "";
                }
            }
            input = $( "<input>" )
                .appendTo( wrapper )
                .val( value )
                .attr( "title", "" )
                .addClass( "ui-state-default ui-combobox-input" )

                .autocomplete({
                    delay:0,
                    minLength: 0,
                    source: function(request, response) {
                        var term = request.term;
                        if ( term in cache ) {
                            response($.map(cache[ term ], function(item) { return { label: item.IlAdi,value: item.IlAdi, option: this}}));
                            return;
                        }
                        $.ajax({
                            type: "POST",
                            url: "WebService_GetData.asmx/GetCmbIller",
                            dataType: "json",
                            //data: "{ 'filterKey': '" + request.term + "','select1': '" + $('#cmbLogisticType').val() + "' }",
                            data: JSON.stringify({ filterKey: request.term, ulke: $asp('cmbLogisticType').val(), alisvaris: (input[0].parentElement.parentElement.children[1].attributes[0].nodeValue=="combobox")?false:true }),
                            contentType: "application/json; charset=utf-8",
                            dataFilter: function(data) { return data; },    
                            success: function(data) {
                                cache[term]= data.d;
                                response($.map(data.d, function(item) {
                                    //return { label: item.IlAdi, value: item.IlKodu  }
                                    return { label: item.IlAdi,value: item.IlAdi, option: this}
                                }))
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                alert(errorThrown);
                            }
                       });
                    },
                    matchContains: true,
                    formatItem: formatItem,
                    formatResult: formatResult,
                    select: function( event, ui ) {
                         if(that.options.select != null){
                            that.options.select(event, ui);
                            }
                            ui.item.option.selected = true;
                            that._trigger( "selected", event, {
                                item: ui.item.option
                            });
                            //alert(ui.item.value); 
                    },
                    change: function( event, ui ) {
                        if ( !ui.item ) {
                            removeIfInvalid( this );
                        }
                    }
                })
                .addClass( "ui-widget ui-widget-content ui-corner-left" );

            input.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.label + "</a>" )
                    .appendTo( ul );
            };

            $( "<a>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Show All Items" )
                .tooltip()
                .appendTo( wrapper )
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "ui-corner-right ui-combobox-toggle" )
                .mousedown(function() {
                    wasOpen = input.autocomplete( "widget" ).is( ":visible" );
                })
                .click(function() {
                    input.focus();

                    // close if already visible
                    if ( wasOpen ) {
                        return;
                    }

                    // pass empty string as value to search for, displaying all results
                    input.autocomplete( "search", "" );
                });

            input.tooltip({
                tooltipClass: "ui-state-highlight"
            });
        },
         refresh:function(){ 
             selected = this.element.children( ":selected" );
             this.input.val(selected.text());
         },

        _destroy: function() {
            this.wrapper.remove();
            this.element.show();
        }
    });


    function formatItem(row) {
    return row[0] + " (<strong>id: " + row[1] + "</strong>)";
    }
    function formatResult(row) {
    return row[0].replace(/(<.+?>)/gi, ''); //removes html tags
    }


    $(function() {
    $( "#combobox" ).combobox({select : function(event, ui){    document.getElementById('MyLabel').value=ui.item.value; }});
    $( "#combobox2" ).combobox({select : function(event, ui){ document.getElementById('MyLabel2').value=ui.item.value; }});
});

     <div class="ui-widget">
                    <strong>Çıkış:</strong>

                        <select id="combobox" runat="server">
                             <option value="">Any value</option>
                        </select>

                    <!--<label id="MyLabel_" style="visibility:hidden" />-->
                    <asp:HiddenField id="MyLabel" runat="server" />
                </div>

                 <div class="ui-widget">
                    <strong>Varış:</strong> 

                        <select id="combobox2" runat="server">
                             <option value="">Any value</option>
                        </select> 

                    <!--<label id="MyLabel2_" style="visibility:hidden" />-->
                    <asp:HiddenField id="MyLabel2" runat="server" />
                </div>

0 个答案:

没有答案