jQuery UI Autocomplete Combobox加载后Placeholder不显示问题求助

这个问题的核心原因很直白：你的<select>里第一个选项默认处于选中状态，而在_createAutocomplete方法初始化输入框时，直接把选中选项的文本赋值给了输入框——输入框有内容时，Placeholder自然不会显示出来。

具体原因拆解 #

看你代码里这段关键逻辑：

var selected = this.element.children( ":selected" ),
    value = selected.val() ? selected.text() : "";
this.input = $( "<input>" ).appendTo( this.wrapper ).val( value )...

因为第一个<option value="1">1</option>默认被选中，selected.val()返回非空的"1"，所以value被设为"1"，输入框初始化就有内容，Placeholder被直接覆盖，只有手动删除内容后才会显现。

解决方案（三种可选，按需挑选） #

方案一：添加空默认选项（推荐，适配required属性）

给<select>加一个空的默认选中选项，这样初始化时selected.val()为空，输入框值为空，Placeholder直接显示，同时保留required的表单验证功能（用户必须选择非空选项才能提交）：

<select id="provider" name="provider" required="">
  <option value="" selected></option> <!-- 新增这一行 -->
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

这种方式最贴合表单交互逻辑，用户打开页面就能看到Placeholder，必须选择有效选项才能完成表单提交。

方案二：强制输入框初始为空

直接修改_createAutocomplete里的赋值逻辑，不管<select>有没有选中选项，输入框初始都设为空：

// 替换原来的value赋值代码
var value = ""; // 强制初始为空，直接显示Placeholder
this.input = $( "<input>" ).appendTo( this.wrapper ).val( value )...

这个方案适合不需要默认显示选中项的场景，但如果<select>原本有预设选中值，会丢失该状态的显示效果。

方案三：仅当选中有效选项时赋值

如果你的<select>可能有预设的有效选中值（不是默认的第一个选项），可以加个判断，只有选中项的value非空时才赋值：

var selected = this.element.children( ":selected" ),
    // 仅当选中项value非空时才赋值文本，否则为空
    value = selected.val() ? selected.text() : "";
this.input = $( "<input>" ).appendTo( this.wrapper ).val( value )...

这种方式兼顾了预设选中值的显示需求和Placeholder的展示效果。

效果验证 #

修改后刷新页面，输入框会直接显示你设置的"My Placeholder"，点击下拉选择选项后，输入框会同步显示对应选项文本，完全符合你的预期需求。

内容的提问来源于stack exchange，提问作者Trombone0904