2009-07-30 49 views
3

我想要做一個自動完成,它會顯示一些東西,然後把其他東西放在選擇的隱藏字段上。自動完成+ jQuery中的隱藏字段?

例子:

在我的數據庫中,我有{[1, 'john'], [2, 'bob'], [3, 'john']}

如果用戶鍵入「jo」並點擊第一個「john」,我不知道對他點擊了哪些條目的方式。所以我需要某種相關的隱藏字段來處理這個問題。

有沒有這樣做的jquery插件還是我必須創建自己的?

我已經開始了,它可以很好的與本地值一起工作,但是如果我必須異步獲取它,它還不能工作。我正在基於我的this plugin from bassistance。我想我可以在代碼中獲得我的雙手,並改變他們處理響應的方式,但如果已經完成了某些工作,它會爲我節省一些時間!

回答

3

您可以使用result handler並將所需的值存儲在隱藏的輸入中。

+0

哦,好的,謝謝!你有關於如何使用它的例子嗎? – marcgg 2009-07-30 17:57:42

1

長搜索僅自動完成後,我找到了表現爲你描述: Facelist

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> 
1

也許這將有助於 訣竅是選擇事件後返回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>