オートコンプリートに JqueryUI を使用していると思います。デフォルトでは、JqueryUI のオートコンプリートは json オブジェクトで動作します。具体的には、"label" と "value" のプロパティを持つオブジェクト リテラルの配列です。
{ label:x, value:y }
オートコンプリートは「label」プロパティを使用してオートコンプリートの一致を計算し、ユーザーが選択すると、「value」プロパティを選択された項目として使用します。また、「value」プロパティを省略した場合は、「label」を比較と選択の両方に使用します。
注意すべき重要なことは、これらのプロパティに限定されないということです。たとえば、「location_id」などの追加のプロパティを追加できます。
{ label: "Some State and Country", location_id: 2 }
オートコンプリート イベント "select" を使用すると、何らかのアクションを実行できます。つまり、選択した location_id を非表示の入力に保存してフォームで投稿したり、驚異的な ajax 呼び出しを実行したりすることもできます。これを試して:
...
<form>
Locations: <input id="location" />
<input type="hidden" id="location_id" />
<input type="submit">
</form>
...
<script>
var mylocations = [
{
label: "North Carolina, USA",
id: 123
},
{
label: "North Dakota, USA",
id: 128
},
{
label: "Nevada, USA",
id: 125
},
{
label: "New York, USA",
id: 311
},
{
label: "New Brunswick, Canada",
id: 267
},
{
label: "Nova Scotia, Canada",
id: 235
},
{
label: "Newfoundlandand , Canada",
id: 223
}];
$("#location").autocomplete({
source: mylocations,
select: function( event, ui ) {
// store your location id somewhere like a hidden input ..you
// can then allow the user to post the form (and selected id) back.
$( "#location_id" ).val( ui.item.id );
return false;
}
});
</script>