jquery中的自动完成+隐藏字段？答案

【问题标题】：Autocomplete + Hidden Field in jquery?jquery中的自动完成+隐藏字段？
【发布时间】：2010-11-15 13:04:03
【问题描述】：

我正在尝试做一个自动完成，它会显示一些东西，然后在选择时将其他东西放在隐藏字段中。

例子：

在我的数据库中我有{[1, 'john'], [2, 'bob'], [3, 'john']}

如果用户键入“jo”并单击第一个“john”，我无法知道他单击了哪个条目。所以我需要某种相关的隐藏字段来处理这个。

是否有一个 jquery 插件可以做到这一点，还是我必须自己创建？

我已经开始了，它可以很好地处理本地值，但是如果我必须异步获取它们，它还不能工作。我的基础是this plugin from bassistance。我想我可以得到代码并改变他们处理响应的方式，但如果已经完成了一些事情，它会节省我一些时间！

【问题讨论】：

标签： jquery ajax autocomplete

【解决方案1】：

您可以使用result handler 并将所需值存储在隐藏输入中。

【讨论】：

【解决方案2】：

我知道这是旧的，但我这样做是为了让隐藏字段填充一个永远不会显示的唯一 ID，并向用户呈现一个基于显示值的自动完成字段：

<script type="text/javascript">
var picklist = [
    { id: "1", value: "One" }, 
    { id: "2", value: "Two" }, 
    { id: "3", value: "Three" }, 
    { id: "4", value: "Four" }
    ];

$().ready(function() {
 $("#pickValue").autocomplete(picklist, {
  minChars: 0,
  max: 12,
  autoFill: true,
  mustMatch: true,
  matchContains: false,
  scrollHeight: 220,
  formatItem: function(row, i, total) {
   return row.value;
  }, 
  formatResult: function(row) {
   return row.value;
  }
 });
 $('input#pickValue').result(function(event, data, formatted) {
  $('#pickID').val( !data ? '' : data.id);
 });
});
</script>

【讨论】：

【解决方案3】：

经过长时间的搜索，我发现的唯一自动完成行为如您所描述的是： Facelist

【讨论】：

【解决方案4】：

这可能会有所帮助诀窍是在选择事件之后返回 false。这将关闭选择下拉菜单，您对隐藏/文本框的更改将保持可见。

 <script type="text/javascript">
      $(document).ready(function(){
        $("#user_autocomplete").autocomplete({
          source: "http://localhost:3000/admin/users/emails_autocomplete",
          minLength: 3,
          delay: 1,
          select: function( event, ui ) {
            if (ui.item) {
              console.log("Selected: " + ui.item.value + " aka " + ui.item.label);
              $("#user_autocomplete").val(ui.item.label);
              $('#search_user_id_equals').val(ui.item.value);
            } else {
              // "Nothing selected, input was " + this.value );
            }
            return false;
          }
        });
      });

......

<input class="hidden" id="search_user_id_equals" name="search[user_id_equals]" type="hidden" />

<div class="input select optional">
  <label for="user_autocomplete">User email</label>
  <input id="user_autocomplete" type="text" index="" class="ui-autocomplete-input string"
         autocomplete="off" role="textbox"
         aria-autocomplete="list" aria-haspopup="true"
         value=""
         />
</div>

【讨论】：