Jquery ui自动完成组合框 - 更改未触发

我需要JQuery UI自动完成组合框的帮助。无论如何我都无法让“CHANGED”事件触发。我已经从各种示例中将这个小部件拉到一起。Jquery ui自动完成组合框 - 更改未触发

I have a JSFiddle here对于当前的工作示例。我希望它通过改变的选择标识“警告”我（我在构建的站点上的一个页面上有4个这样的小部件）。

我没有从这个例子中得到JS错误，所以我做错了什么？在此先感谢检测用户

(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" 
      }) 
       .on('mouseup', function() { 
       $(this).select(); 
      }); 

      $(this).blur(); 

      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(); 
       input.blur(); 

       // 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) { 

       var selected = this.element; 
       return; 
      }; 

      // Search for a match (case-insensitive) 
      var default_text = ""; 

      var value = this.input.val(), 
       valueLowerCase = value.toLowerCase(), 
       valid = false; 

      this.element.children("option").each(function() { 

       if ($(this).val() == "default") { 
        default_text = $(this).text(); 
       }; 

       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(default_text) 
       .attr("title", value + " didn't match any item") 
       .tooltip("open"); 

      this._delay(function() { 
       this.input.tooltip("close").attr("title", ""); 
      }, 2500); 
      this.input.data("ui-autocomplete").term = ""; 
     }, 

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

     refresh: function() { 
      selected = this.element.children(":selected"); 
      this.input.val(selected.text()); 
     }, 

     select: function (event, ui) { 
      ui.item.option.selected = true; 
      self._trigger("selected", event, { 
       item: ui.item.option 
      }); 
      select.trigger("change"); 
     }, 

     change: function (event, ui) { 
      if (!ui.item) { 
       var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "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 
        $(this).val(""); 
        select.val(""); 
        input.data("autocomplete").term = ""; 
        return false; 
       }; 
      }; 
     } 
    }); 
})(jQuery);

来源

2014-02-17 TheRealPapa

什么是JS错误你得到？ –

嗨Java_User，没有错误，只是没有触发ALERT – TheRealPapa

简单的方式改变了组合框试试这个：

$("#combobox").combobox({ 
    select: function (event, ui) { 
     alert(this.value); 
    } 
});

来源

2014-02-17 07:20:48

嗨Drixson，真棒，几乎完美！看起来上面的语句并没有初始化组合框以排除选定的值。我通过这样做得到了工作： – TheRealPapa

我很乐意帮助其他开发人员 –

这是一个很好的解决方案，然而，它只在选择（可以理解）的时候触发。所以如果你想知道没有任何类型的事件发生变化，那么你的运气不好。 –

真棒和近乎完美！看起来上面的语句并没有初始化组合框以排除选定的值。我得到它的工作通过这样做：

jQuery("#select_address").combobox({ 
    select: function (event, ui) { 
     alert(jQuery(this).attr('id')); 
    } 
}); 
    jQuery("#select_address").val("default").combobox("refresh");

来源

2014-02-17 08:12:09 TheRealPapa

您可以使用此也：

$("#combobox").change(function() { 
    alert(".change() called."); 
});

来源

2014-02-17 08:18:45

为什么downvote？ –

Jquery ui自动完成组合框 - 更改未触发

回答

相关问题