jquery-ui のオートコンプリートを使用しています。複数の値では、スペースの後に単語ごとにドロップダウン リストを取得できますが、ドロップダウンは入力ボックスのサイズで表示されます。入力ボックスの全長ではなく、ドロップダウンの単語に相当する幅を持つそれぞれのカーソルの下にドロップダウンを表示することは可能ですか?
編集: 例 (Google のような検索ボックス):
Google にアクセスして長い文章を入力すると、各単語の後に、カーソル位置の下の単語ごとにオートコンプリート ドロップダウンが表示されます。したがって、jQuery Autocomplete に追加できる同様のドロップダウンが必要です
私の関数は、複数の単語とアルファベット順に配列を表示する機能を備えているため、これほど大きなものです。<scriptコードは次のとおりです。
<script>
$(function() {
var availableTags = <?php echo json_encode($sometags); ?>;
function split( val ) {
return val.split( / \s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#query" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 1,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
var term = $.ui.autocomplete.escapeRegex(request.term)
, startsWithMatcher = new RegExp("^" + term, "i")
, startsWith = $.grep(availableTags, function(value) {
return startsWithMatcher.test(value.label || value.value || value);
})
, containsMatcher = new RegExp(term, "i")
, contains = $.grep(availableTags, function (value) {
return $.inArray(value, startsWith) < 0 &&
containsMatcher.test(value.label || value.value || value);
});
response(startsWith.concat(contains));
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( " " );
return false;
}
});
});
</script>
編集: google-box と同様に、ドロップダウンは入力ボックスの幅内に収まる必要があります。たとえば、入力ボックスの最後の単語のドロップダウン ボックスは、右ではなく左にサイズ変更する必要があります。ドロップダウン ボックスの右端は、入力ボックスの右端と一致する必要があり、ドロップダウンの合計幅 (入力ボックスと同じかそれより大きい単語の場合) は、入力ボックスの幅を超えないようにする必要があります。
更新: Googleのようなオートコンプリートの
最終的な mod は次
のとおり
です
。Google のように最初の提案が入力ボックスの全幅で開き、残りの提案が最長の提案の幅で開く 2 つの配列
3) 「スペース」(複数の値) の後に単語を入力する前にドロップダウンを開くバグを修正しました。
4) 間に単語を追加している間、ドロップダウンが最後に開いたままにならないようにします。
5) 2013 年 2 月 16 日更新: 提案ボックスから入力されたタグの長さが入力ボックスの長さを超えた場合、次のタグの入力時に、入力ボックスは最初からタグを表示するか、最初のタグの位置に戻り、ここに示すように、カーソルが最後に置かれた場所からではありません - http://jqueryui.com/autocomplete/#multiple。これは修正されました。
これは、1 つの配列のみが使用され、提案は常に最長の提案の幅である同様のフィドルです - FIDDLE
質問に対する主な解決策を提供してくれた Jeffery To と、上記の mod の作成に役立つアイデアを提供してくれた Vadim と Dom に感謝します。