jQuery自動完成 - 如何查看項目標籤，但提交項目值

我完全是新的JavaScript，我可能咬的比我可以咀嚼，但我試圖讓我的Rails網站上的jQuery autcomplete小部件工作。jQuery自動完成 - 如何查看項目標籤，但提交項目值

我有一個名爲「鏈接」的頁面，我希望能夠將一個人分配給一個鏈接。使用自動完成我應該能夠有一個文本框下拉列表中的自動完成的人民名稱，並選擇時，人名保持在文本框中。但是當表單被提交時，我不希望與表單一起發送人員姓名，我想要用表單發送人員ID。

所以問題是如何讓人員名稱一旦選擇，留在文本框中，但一旦提交了人員ID提交。

在Rails，這是怎麼了，我從我的個人控制器提供的JSON數據：

def index 
    if params[:term] 
    @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"], :limit => 5) 
    else 
    @people = Person.all 
    end 

    respond_to do |format| 
    format.html # index.html.erb 
    format.json { render :json => @people.to_json(:only => [:id, :given_name]) } 
    end 
end

以上輸出以下JSON文本：

[{"person":{"id":1,"given_name":"dale"}},{"person":{"id":2,"given_name":"sally"}},{"person":{"id":3,"given_name":"joe"}}]

使用jQuery自動完成插件，如何我是否在建議的匹配中出現'given_name'，一旦選定，就將'given_name'保留在文本框中，但在提交表單時發送'id'值。

我想我需要在JavaScript中指定要顯示的標籤以及要發送的值。正如我剛剛得到的JavaScript的懸掛，如果你能解釋你的答案如何工作，將不勝感激。謝謝。

來源

2010-07-10 Oscar

我可以想出最好的答案是爲該人員的ID創建一個隱藏的輸入字段。當您選擇一個名稱時，result（）函數更新隱藏輸入的值，其ID爲：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" /> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
    <script> 
    $(document).ready(function(){ 
    // your data 
    var data = [{"person":{"id":1,"given_name":"dale"}},{"person":{"id":2,"given_name":"sally"}},{"person":{"id":3,"given_name":"joe"}}]; 


    $("#person_name").autocomplete(data, { 
     // formatting of choices in drop down 
     formatItem: function(item) { 
     return item.person.given_name; 
     }, 
     // format of choice in input field 
     formatResult: function(item) { 
     return item.person.given_name + " (" + item.person.id + ")"; 
     } 

     // when choice is made, update value of hidden field with the id 
    }).result(function(event, data, formatted) { 
     $("#person_id").val(data.person.id); 
    }); 
    }); 
    </script> 

</head> 
<body> 
    Select a person: <input id="person_name" /> (dale, sally, joe) 
    <input type="hidden" id="person_id"/> 
</body> 
</html>

來源

2010-07-10 16:10:35

感謝您的回覆。我認爲你的解決方案可以工作，但我希望能夠發送不同於文本框中顯示的值的能力將被內置到jQuery小部件中。這似乎應該是可能的，沒有隱藏的領域，但我沒有抓住一些東西。如果這是不可能的，那麼我將使用隱藏的字段解決方案。 – Oscar 2010-07-11 02:30:18

我重新審查了jQuery小部件文檔，你的回答是正確的。發送不同於文本字段中顯示的值的方式（如在個人的ID中，而不是在所選的個人姓名中）是通過隱藏字段。我想我是通過嘗試使小部件本身提供隱藏的價值而使其變得過於複雜。文檔中的示例清楚地表明該小部件與隱藏字段結合使用。謝謝。 – Oscar 2010-07-11 03:57:31

這是內置到自動完成功能中的。查看一些示例 - 其中一個返回以下格式的數據：

[{ 
    "id": "Ciconia ciconia", 
    "label": "White Stork", 
    "value": "White Stork2" 
}, 
{ 
    "id": "Platalea leucorodia", 
    "label": "Spoonbill", 
    "value": "Spoonbill" 
}]

您可以以不同方式提供標籤和值。

來源

2010-07-11 00:09:34 Matt

感謝您的快速回復。你指出的是我正在尋找的內置功能。你有什麼關於如何實現這一點的指針？我可能是錯的，但是我從文檔中瞭解到的是，「標籤」是下拉列表中顯示的內容，「值」是一旦選擇了「標籤」就被存儲在文本字段中的內容。我設法做的唯一事情是選擇「標籤」，如「標籤」：「喬」，然後將值'4'（人員ID）存儲在文本字段中。這是功能性的，但看起來很愚蠢，因爲沒有人想要真正看到人員ID。對此有何想法？ – Oscar 2010-07-11 02:27:36

剛剛按照您的建議重新審查了jQuery小部件上的文檔，我想我現在已經在您的答案和下面的@ ken答案之間計算出了這一點。根據文檔，我可以像上面那樣指定不同的值，然後將值提供給隱藏字段，然後將其發送到我的Rails應用程序。我想這讓我覺得太複雜了，因爲我試圖以某種方式讓jQuery小部件提供隱藏的值，當文檔中的示例清楚地顯示該小部件與隱藏字段結合使用時。謝謝。 – Oscar 2010-07-11 03:53:52

（我試圖標記你的答案和@ Ken的答案是正確的，但它只允許選擇一個！你的回答指向我正確的文檔，但@ Ken的原始答案是每個文檔的解決方案。） – Oscar 2010-07-11 04:00:32

jQuery自動完成 - 如何查看項目標籤，但提交項目值

回答

相關問題