2011-04-12 133 views
1

我有一個輸入字段(文本),我想用多個名稱執行自動完成。它的行爲與Gmail中的收件人:字段類似,用戶輸入姓名並按回車並繼續。問題是,我有一個名稱列表,這是什麼被添加到輸入字段,並且一旦你提交,據我所知,只有字段字符串被髮送到服務器。問題是有兩個同名的人,所以:John Smith, Bob, John Smith可能被輸入,並且該字符串將被髮送到服務器。jQuery自動完成添加自動完成數據的附加數據

在後端,所有用戶都有一個唯一的ID。有什麼辦法可以讓用戶的名字成爲自動完成源,但是他們的ID已經發送到服務器了?

我使用jQuery 1.5.1和這個插件:jQuery UI Autocomplete

回答

4

標準的搜索將提供高達你需要的一切。您只需使用$.map()函數從服務器響應中獲取所需的數據。例如:

... 
success: function (data) { 
    response($.map(data.d, function (item) { 
     return { 
     id: item.ContactId, 
     value: item.LastName + ", " + item.FirstName 
     } 
    })) 
} 
... 

然後,只需存儲所選擇的項(包括ID和名稱)的輸入上的$().data()變量。例如:

... 
select: function (event, ui) { 
    $(this).data("Selected", item); 
} 
... 

現在,當您準備好發佈您的值返回到服務器,你可以簡單地發送所選條目的ID如下:

var idToSend = $("#autoComplete").data("Selected").id; 

我希望幫助。祝你好運!

* *編輯*

抱歉,$.map()被分裂思想。在我的示例中,data.d是.NET特有的,但有兩個屬性是自動完成插件(.value.label)的本機特性。

.value將顯示和存儲的內容如果.label不存在;否則,.value將被視爲輸入後選擇中存儲的值,並且.label將顯示在下拉菜單中。