如何在jQuery Autocomplete中设置隐藏输入框的值

我完全懂你的困扰——用户输入地址后，输入框突然变成一串看不懂的pid，体验简直糟透了。你已经加了隐藏输入框，接下来只需要调整Autocomplete的配置，把pid存到隐藏框里，同时让输入框保留友好的地址文本就行。

关键修改要点： #

• 调整response里的value字段：原来你把value设为item.pid，Autocomplete默认会把这个值赋值给输入框。现在让value和label保持一致（也就是完整的地址文本），这样选中后输入框显示的是用户能看懂的地址。
• 添加select事件监听：当用户选中下拉选项时，把对应的pid写入隐藏输入框#autocompletePid。
• 修正minLength的位置：它是Autocomplete的配置项，不是AJAX请求的参数，之前放错地方了。

修改后的完整代码： #

HTML部分（和你现有代码一致，无需改动）：

<input type="hidden" id="autocompletePid" autocomplete="off" />
<div id="tabs-1" class="ui-tabs-hide"> 
  <input type="text" id="autocomplete" autocomplete="off" placeholder="Enter an address or city..." /> 
  <input type="submit" value="GO" /> 
</div>

JS部分：

<script type="text/javascript"> 
$(function() { 
  $("#autocomplete").autocomplete({ 
    source: function(request, response) { 
      $.ajax({ 
        type: 'GET', 
        url: "/live-search" + '?term=' + request.term, 
        success: function(data) { 
          response($.map(data, function(item) { 
            return { 
              label: item.street + ' ' + item.city.city + ', ' + item.state.stateCode + ' ' + item.zipcode.zipcode, 
              value: item.street + ' ' + item.city.city + ', ' + item.state.stateCode + ' ' + item.zipcode.zipcode, // 和label保持一致
              pid: item.pid // 额外携带pid数据
            } 
          })); 
        } 
      }); 
    }, 
    minLength: 3, // 移到Autocomplete的配置项里
    select: function(event, ui) { 
      // 把选中项的pid存入隐藏输入框
      $("#autocompletePid").val(ui.item.pid); 
      // 确保输入框显示的是友好的地址文本
      $(this).val(ui.item.label); 
      // 阻止默认行为，避免意外赋值
      return false; 
    } 
  }); 
}); 
</script>

简单解释： #

1. 在response的映射里，我们给每个选项额外加了pid字段，这样在select事件里就能直接拿到这个值。
2. select事件触发时，ui.item就是用户选中的选项对象，我们从中取出pid设置到隐藏框。
3. 显式设置输入框的值并返回false，是为了彻底避免意外情况，确保输入框始终显示用户能理解的地址。

这样修改后，用户选中地址时，输入框会保留完整的地址文本，而pid会悄悄存入隐藏输入框，提交表单时就能正常获取到pid了。

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