【jQuery UI】autocompleteで項目選択後フィールド内にlabelを表示させる
11878 ワード
コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
var projects = [
{
value: "001",
label: "test",
},
{
value: "002",
label: "test",
},
{
value: "003",
label: "test2",
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
console.log("select!!")
$( "#project-id" ).val( ui.item.value );
return false;
}
})
});
</script>
</head>
<body>
<input id="project" />
<input type="hidden" id="project-id" />
</body>
</html>
説明
key value型の値をautocompleteで選択させたい場合。
input type="hidden"にvalue、
inputにlabelを表示するようにしている。
実際にformなどから送信するものはhiddenに設定されたvalueを使う。
こうすることで同名labelだが、keyは違うなどにも対応できる。
参考サイト
データと表示項目のカスタマイズより。
Author And Source
この問題について(【jQuery UI】autocompleteで項目選択後フィールド内にlabelを表示させる), 我々は、より多くの情報をここで見つけました https://zenn.dev/dev63/articles/dc639336a6f533著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol