value
オートコンプリータに ( ではなく)およびlabel
(ではなく) プロパティを持つオブジェクトの配列を指定すると、( ではなくdescription
) に対してのみフィルタリングが行われます。label
value
source
オプションに関数を指定する場合、フィルタリングは自分で行う必要があります。引数 (プロパティrequest
を持つオブジェクト) と引数 (結果でコールバックする関数) を受け取ります。次に、任意の種類の検索を使用して、関連する結果を自分で返します (たとえば、コード内でとの両方を検索できます)。term
response
value
description
たとえば、大まかに:
$("some selector").autocomplete({
// ...other options...
source: function(request, response) {
var matches = [];
/* ...search for matches in your data using `request.term`,
add them to `matches`...
*/
response(matches);
}
});
返される配列は、単なる文字列の場合もあればvalue
、label
プロパティを持つオブジェクトの場合もあります。label
が表示され、value
選択すると が使用されます。
たとえば、これは空港の (短い) リストを使用したもので、入力するとvalue
(空港コード) とdescription
(空港名)の両方がチェックされます。ソース
jQuery(function($) {
var data = [
{value: "ORD", description: "Chicago O'Hare"},
{value: "LHR", description: "London Heathrow"},
{value: "SFO", description: "San Francisco International"}
];
$("#theInput").autocomplete({
source: function(request, response) {
var capterm = request.term.toUpperCase();
var matches = $.map(data, function(entry) {
if (entry.value.toUpperCase().indexOf(capterm) !== -1 ||
entry.description.toUpperCase().indexOf(capterm) !== -1) {
return {
value: entry.value,
label: entry.value + " - " + entry.description
};
}
});
response(matches);
}
});
});
したがって、「or」または「chic」と入力すると「ORD - Chicago O'Hare」が表示され、それを選択すると「ORD」がフィールドに入力されます。「san」または「sfo」と入力すると「SFO - San Francisco International」が表示され、それを選択すると「SFO」がフィールドに入力されます。