Я использую jquery ui autocomplete для реализации предложений при вводе. Я изменил расположение автозаполнения, чтобы оно появлялось рядом со словом, а не появлялось поверх всего предложения, как это происходит по умолчанию. Вот как это выглядит в настоящее время:
Но как только текст становится многострочным, автозаполнение позиционирования переходит к броску.
Как видите, последнее слово sc получает предложение автозаполнения, но предложение отображается в конце первой строки вместо того, чтобы показываться рядом с последним словом как и в первой строке.
Это код, который применяет автозаполнение позиционирования
open: function(event, ui){
var input = $( event.target ),
widget = input.autocomplete( "widget" ),
style = $.extend( input.css( [
"font",
"border-left",
"padding-left"
] ), {
position: "absolute",
visibility: "hidden",
"padding-right": 0,
"border-right": 0,
"white-space": "pre"
} ),
div = $( "<div/>" ),
pos = {
my: "left bottom",
collision: "flip"
},
offset = 10;
widget.css( "width", "" );
div
.text( input.text().replace( /\S*$/, "" ) )
.css( style )
.insertAfter( input );
offset = Math.min(
Math.max( offset + div.width(), 0 ),
input.width() - widget.width()
);
div.remove();
pos.at = "left+" + offset + " top";
input.autocomplete( "option", "position", pos );
widget.position( $.extend( { of: input }, pos ) );
}
Этот код был первоначально предложен в качестве ответа в этом посте, на котором Я сделал несколько небольших изменений Jquery -ui выпадающий список автозаполнения под каждым словом
Я применяю это к элементу content editable, который имеет свойство div {min-height: 18px; overflow: auto;}, чтобы получить многострочную прокрутку .
Как я могу изменить это, чтобы предложения автозаполнения появлялись в конце слова также в нескольких строках?