如何在jquery ui组合框上放置占位符？

在jQuery UI组合框(ComboBox)上添加占位符

基础概念

jQuery UI组合框(ComboBox)是一个结合了输入框和下拉选择框的控件，它基于jQuery UI的Autocomplete组件构建。占位符(placeholder)是在输入框中显示的提示文本，当用户开始输入时会自动消失。

解决方案

在jQuery UI组合框上添加占位符有几种方法：

方法1：使用HTML5 placeholder属性

$(function() {
  $("#comboBox").combobox({
    // 其他配置选项
  }).attr("placeholder", "请选择或输入...");
});

方法2：通过CSS模拟占位符

$(function() {
  $("#comboBox").combobox({
    // 其他配置选项
  });
  
  // 添加占位符文本
  $("#comboBox").val("请选择或输入...").addClass("placeholder-text");
  
  // 处理焦点事件
  $("#comboBox").on("focus", function() {
    if ($(this).val() === "请选择或输入...") {
      $(this).val("").removeClass("placeholder-text");
    }
  }).on("blur", function() {
    if ($(this).val() === "") {
      $(this).val("请选择或输入...").addClass("placeholder-text");
    }
  });
});

// CSS部分
.placeholder-text {
  color: #999;
}

方法3：使用jQuery UI的create事件

$(function() {
  $("#comboBox").combobox({
    create: function(event, ui) {
      $(this).attr("placeholder", "请选择或输入...");
    }
    // 其他配置选项
  });
});

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI ComboBox with Placeholder</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    .custom-combobox {
      position: relative;
      display: inline-block;
    }
    .custom-combobox-toggle {
      position: absolute;
      top: 0;
      bottom: 0;
      margin-left: -1px;
      padding: 0;
    }
    .custom-combobox-input {
      margin: 0;
      padding: 5px 10px;
    }
    .placeholder-text {
      color: #999;
    }
  </style>
</head>
<body>

<div class="custom-combobox">
  <select id="comboBox" style="display: none;">
    <option value="">请选择...</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <input id="comboBox-input" class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left">
  <button tabindex="-1" class="custom-combobox-toggle ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right" title="显示所有项目">
    <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
    <span class="ui-button-text"></span>
  </button>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
  $.widget("custom.combobox", {
    _create: function() {
      this.wrapper = $("<div>")
        .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;
      
      $("<button>")
        .attr("tabindex", -1)
        .attr("title", "显示所有项目")
        .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");
          
          if (wasOpen) {
            return;
          }
          
          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) {
      if (ui.item) {
        return;
      }
      
      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;
        }
      });
      
      if (!valid) {
        this.input.val("").attr("title", value + " 未找到");
        this.input.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();
  $("#comboBox-input").attr("placeholder", "请选择或输入...");
  
  // 或者使用更复杂的占位符处理
  /*
  $("#comboBox").combobox();
  var $input = $("#comboBox-input");
  $input.val("请选择或输入...").addClass("placeholder-text");
  
  $input.on("focus", function() {
    if ($(this).val() === "请选择或输入...") {
      $(this).val("").removeClass("placeholder-text");
    }
  }).on("blur", function() {
    if ($(this).val() === "") {
      $(this).val("请选择或输入...").addClass("placeholder-text");
    }
  });
  */
});
</script>
</body>
</html>