JQuery Combobox觸發另一個事件

Question

我有combobox jquery自動完成我的下拉列表。我也有2個輸入字段被禁用。如果組合框值是新的，它將啓用這兩個輸入字段。任何解決方案如何做到這一點？到目前爲止我的代碼：

(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", "") 
 
     .attr("id", "sicombo") 
 
     .addClass("form-control 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") 
 
     .attr("id", "sicombo2") 
 
     .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() { 
 
    $("#combobox123").combobox(); 
 
}); 
 

 
$(function() { 
 
    $("input:text[name=browser]").attr("disabled", true); 
 
    $("input:text[name=idbrowser]").attr("disabled", true); 
 

 
    $('select[name=brow]').on('change', function() { 
 
    $("input:text[name=browser]").attr("disabled", ($(this).val() === 'new') ? false : true); 
 
    $("input:text[name=idbrowser]").attr("disabled", ($(this).val() === 'new') ? false : true); 
 
    }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<select name="brow" class="form-control" id="combobox123"> 
 
    <option value="">-- Choose --</option> 
 
    <option value="new">Create New</option> 
 
    <option value="chrome">Google Chrome</option> 
 
    <option value="firefox">Mozilla Firefox</option> 
 
</select> 
 
<input type="text" class="form-control" name="idbrowser" /> 
 
<input type="text" class="form-control" name="browser" />

Answer 1

你應該使用jQuery自動完成的autocompleteselect事件。

替換下面的代碼

$('select[name=brow]').on('change', function() { 
    $("input:text[name=browser]").attr("disabled", ($(this).val() === 'new') ? false : true); 
    $("input:text[name=idbrowser]").attr("disabled", ($(this).val() === 'new') ? false : true); 
    }); 

隨着

$("#sicombo").on("autocompleteselect", function(event, ui) { 
    $("input:text[name=browser]").attr("disabled", (ui.item.option.value === 'new') ? false : true); 
    $("input:text[name=idbrowser]").attr("disabled", (ui.item.option.value === 'new') ? false : true); 
    });