使用Jquery的可编辑下拉列表？ [英] Editable dropdown list using Jquery?

问题描述

可编辑下拉列表在直接aspx中工作正常..



如果我在母版页中使用..我没有得到结果.....



查看此代码..

Editable dropdown list is working fine in direct aspx..

if i used in master page.. i am not getting result.....

see this code..

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../StyleSheet/Table.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../JS/Validations.js"></script>

    <script src="../JS/DateValidation.js" type="text/javascript"></script>

    <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  
    <script>
        (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
                            };
                    }));
                },

                _removeIfInvalid: function(event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
                    this.element.children("option").each(function() {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
                    this.element.val("");
                    this._delay(function() {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.autocomplete("instance").term = "";
                },

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

        $(function() {
            $("#combobox").combobox();
            $("#toggle").click(function() {
                $("#combobox").toggle();
            });
        });
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <body>

        <div>
            <div class="ui-widget">
                <asp:DropDownList ID="combobox" runat="server">
                </asp:DropDownList>
                &nbsp;
            </div>
        </div>
        <asp:ImageButton runat="server" ID="imgbtn" ImageUrl="~/images/gobutton_red.gif"
            OnClick="imgbtn_Click" Style="height: 16px" />

    </body>
    <%-- <br />
          
</asp:Content>

推荐答案

）{

.widget（ custom.combobox，{
_create：function（）{
this .wrapper =

.widget("custom.combobox", { _create: function() { this.wrapper =

（ < span>）
.addClass（ custom-combobox）
.insertAfter（ this .element）;

this .element.hide（）;
this ._ createAutocomplete（）;
this ._ createShow AllButton（）;
}，

_createAutocomplete：function（）{
var selected = this .element.children（ ：selected），
< span class =code-sdkkeyword> value = selected.val（）？ selected.text（）： ;

this .input =

("<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 =

这篇关于使用Jquery的可编辑下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！