在IE（所有版本）中打破JQuery自动完成组合框线项目这将采取一个lookie

I have an autocomplete combo-box inside a div which opens up into a dialog box. In IE the line items are crammed together and text is not a all visible. You can get the source code, such as I have, directly from JQuery and experience the error such as I have.

我在div中有一个自动完成组合框,可以打开一个对话框。在IE中,行项目挤在一起,文本不是全部可见。您可以直接从JQuery获取源代码(例如我的源代码)并体验我所拥有的错误。

For an explanation of use (in case you think it is necessary): This is a pop-up holding a combobox for email addresses. I'm after the dialog loads I use BindUsers to retrieve the list and use the success to build. I've experienced another issue here where I would add a null or "Enter an email" value and when I append the rest of the options the element I previously added is overwritten.

有关使用的解释(如果您认为有必要):这是一个弹出窗口,其中包含用于电子邮件地址的组合框。我在对话框加载后使用BindUsers来检索列表并使用成功构建。我在这里遇到了另一个问题,我将添加一个null或“输入一个电子邮件”值,当我附加其余选项时,我之前添加的元素将被覆盖。

Also the alert which should fire, never fires....

还应该开火的警报,永远不要开火....

If this isn't enough, you might shoot some ducks and not down vote every post you don't understand. I'm looking for a relatively quick response... Thanks. Link to src: https://jqueryui.com/autocomplete/#combobox

如果这还不够,你可能会拍一些鸭子,而不是在你不理解的每篇文章中投票。我正在寻找一个相对快速的回复...谢谢。链接到src:https://jqueryui.com/autocomplete/#combobox

 function BindUsers(){
            $.ajax({ url: '<%=Page.ResolveClientUrl("~/Chat_getCurrentTickets.aspx")%>',
                data: { fetch: "GetUserList"}, 
                async: false,
                type: 'GET',
                dataType: "json",
                success: onBindUserSuccess, 
                error: function(){(alert('Error getting list of recipients'))}});      
        }

        function onBindUserSuccess(data){           
            
            //opt.value = '-1';
            //opt.text = 'Enter an email';
            //$('#combobox').append(opt);
            //$('#combobox').selectedIndex = -1;

            for(var i=0;i< data.length;i++){
                var opt = document.createElement('option');
                if(data[i].OperatorName.trim() != ''){
                    opt.value = data[i].Email;
                    opt.text = data[i].OperatorName;
                    $('#combobox').append(opt);
                }
            }
        }

        (function( $ ) {
            $.widget( "custom.combobox", {
                _create: function() {
                    this.wrapper = $( "<span>" )
                      .addClass( "custom-combobox" )
                      .insertAfter( this.element );
 
                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },
 
                _createAutocomplete: function() {
                    var selected = this.element.children( ":selected" ),
                      value = selected.val() ? selected.text() : "";
 
                    this.input = $( "<input>" )
                      .appendTo( this.wrapper )
                      .val( value )
                      .attr( "title", "" )
                      .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
                      .autocomplete({
                          delay: 0,
                          minLength: 0,
                          source: $.proxy( this, "_source" )
                      })
                      .tooltip({
                          tooltipClass: "ui-state-highlight"
                      });
 
                    this._on( this.input, {
                        autocompleteselect: function( event, ui ) {
                            ui.item.option.selected = true;
                            this._trigger( "select", event, {
                                item: ui.item.option
                            });
                        },
 
                        autocompletechange: "_removeIfInvalid"
                    });
                },
 
                _createShowAllButton: function() {
                    var input = this.input,
                      wasOpen = false;
 
                    $( "<a>" )
                      .attr( "tabIndex", -1 )
                      .attr( "title", "Show All Items" )
                      .tooltip()
                      .appendTo( this.wrapper )
                      .button({
                          icons: {
                              primary: "ui-icon-triangle-1-s"
                          },
                          text: false
                      })
                      .removeClass( "ui-corner-all" )
                      .addClass( "custom-combobox-toggle ui-corner-right" )
                      .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", "" );
                      });
                },
 
                _source: function( request, response ) {
                    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                    response( this.element.children( "option" ).map(function() {
                        var text = $( this ).text();
                        if ( this.value && ( !request.term || matcher.test(text) ) )
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }) );
                },
 
                
 
                _destroy: function() {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })( jQuery );

        //$( ".combobox" ).autocomplete({
        //    appendTo: "#dialog"
        //});
 
        $(function() {
            $( "#combobox" ).combobox();
            $("#combobox").change(function() {
                alert($(this).val());  //To fetch the value                 
            });
            $( "#toggle" ).click(function() {
                $( "#combobox" ).toggle();
            });
        });

<div id="dialog" title="Help Desk Email" style="display:none;" class="ui-front">                  
                    <div style="width:100%;"> 
                        <div>
                            <div style="width:100%;display:inline-block">
                                <input type="button" id="btnSend" value="Send" onclick="btnSendClickEvent()" style="margin:25px 25px 5px 5px" />
                                <label title="Select a recipient" id="RadCBTo" style="height:25px;margin-right:36px">To: </label>                            
                                <select id="combobox" >
                                    <option value="" selected="selected">Insert or select and email address</option>
                                </select>            
                            </div>
                            <div>
                                <label id="label2" style="height:20px;width:300px; margin:25px 5px 5px 80px">Subject: </label>
                                <input type="text" id="txtSubject" style="height:20px;width:550px;" />
                                <input type="hidden" id="tbTo" />                            
                            </div>
                            <div>
                                <textarea id="tdBody" aria-multiline="true" style="margin:25px 5px 5px 138px; width:inherit;" cols="90" rows="25"></textarea> 
                                <label id="label1" style="background-color:red;"></label>  
                                <input type="hidden" id="resolve"/>                            
                            </div>               
                        </div>                                                  
                    </div>              
                </div>

更多相关文章

随机推荐