none
Master Page - jquery RRS feed

  • Genel Tartışma

  • Merhaba

    Forumlardan autocomplate ile ilgili bir kod bloğu buldum. Hem güzel çalışıyor hemde tam da aradığım şey. Ancak Normal bir sayfada çalışıyor. Aynı projede masterpage e sahip bir sayfada ne yaptıysam çalıştıramadım. .css ve .js yolları doğru. yardımlarınıza şimdiden teşekkür ederim.

    <link href="resources/jquery-ui.css" rel="stylesheet" />
       <style>
            .custom-combobox {
                ;
                display: inline-block;
            }
    
            .custom-combobox-toggle {
                ;
                top: 0;
                bottom: 0;
                margin-left: -1px;
                padding: 0;
            }
    
            .custom-combobox-input {
                margin: 0;
                padding: 5px 10px;
            }
        </style>
        
        <script src="resources/jquery-1.12.4.js"></script>
        <script src="resources/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({
                              classes: {
                                  "ui-tooltip": "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")
                          .on("mousedown", function () {
                              wasOpen = input.autocomplete("widget").is(":visible");
                          })
                          .on("click", function () {
                              input.trigger("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();
                    }
                });
    
                $("#combobox").combobox();
                $("#toggle").on("click", function () {
                    $("#combobox").toggle();
                });
            });
        </script>
    

     <div class="ui-widget">
                <label>Your preferred programming language: </label>
                <select id="combobox" runat="server">
                    <option value="">Select one...</option>
                    
                </select>
            </div>

    23 Ekim 2017 Pazartesi 17:12