Question

我使用jQuery自动完成组合框并希望在加载页面时设置值以输入（不同的值）。我的JavaScript代码：

function setValue() {
  var filt_lead_name = $("#filt_lead_name").val();
  $('.ui-autocomplete-input').val(filt_lead_name);
  $('.ui-autocomplete-input').autocomplete('close');
  return false;
}

$("#clicky").click(function() {
  setValue();
});

$.widget("custom.combobox", {
  _create: function() {
    this.wrapper = $("<span>")
      .addClass("custom-combobox")
      .insertAfter(this.element);
    this.element.hide();
    this._createAutocomplete();
    this.element.bind("change", function() {
      input.val($(select).find("option:selected").text());
    });
  },

  _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"
    });
  },

  _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({
  select: function(event, ui) {
    var text = $("#combobox option:selected").text();
    var res = text.split(" ");
    $("#filt_lead_name").val(res[0]);
    $("#filt_lead_name").keyup();
  }
});

$("#toggle").on("click", function() {
  $("#combobox").toggle();
});

我的HTML：

<div class="ui-widget">
  <select id="combobox">
    <option value="">Select one...</option>
    <option value="Becker Patrick">Becker Patrick</option>
    <option value="Orfei Jürg">Orfei Jürg</option>
  </select>
</div>

当我手动调用$("#clicky").click()函数时，它将在输入中设置值。但它没有设置页面加载的值。我试图运行setValue()，但没有点击就无法运行。

请帮我解决这个问题并设置输入值。谢谢！

Answer 1

更改以下代码：

$("#clicky").click(function () {
    setValue();
});

到

$(document).ready(function(){
    setValue();
});

这样它可以在DOM准备好而不是点击时设置值。

页面加载时将值设置为jquery自动完成组合框

1 个答案: