Как выделить несколько результатов поиска во вводе нескольких текстовых полей

Question

Я пытаюсь выделить несколько результатов поиска в текстовом поле - несколько текстовых областей - формы.

После долгих поисков и многих испытаний я нашел решение, пока я готовил этот вопрос для S.O. но прежде, чем я его представил. Я думал, что стоит записать здесь, чтобы сэкономить время для кого-то другого с той же проблемой. Надеюсь, это приемлемо для S.O. Если нет, модераторы, пожалуйста, удалите.

В приложении, над которым я работаю, пользователи вводят текст и хранятся в MySQL, где каждая запись соответствует форме. Пользователи могут напомнить любую запись для редактирования, и когда они это сделают, они будут снова представлены ранее введенные данные в текстовых областях для изменения. Все это работает.

Теперь я выполнил функцию поиска для поиска по всей таблице, и когда пользователь вызывает запись, я хочу представить ее в форме для редактирования, причем все и все поисковые запросы на выделенной странице - например. например:

Это упрощено, действительная форма больше, поэтому пользователь может не заметить другие образы на странице.

Я сделал это с подсветкой для первого вхождения строки удара, если она присутствует в форме, но проблема возникает, когда строка появляется несколько раз в одной текстовой области или в нескольких текстовых областях на такой же вид.

Я пробовал эти подходы:

• setSelectionRange: Это только один, который работает даже на полпути, но выделяет только одна строка за форму. Это имеет смысл, потому что AFAIK у вас не может быть более одного элемента, выбранного в поле ввода или форме html, и в качестве пользовательского интерфейса для тех, кто ищет результаты поиска, это не очень удобно.

• добавить стиль в соответствующих точках ввода текста: <span style="background-color: yellow">ZZZZ</span>
  Я не ожидал, чтобы это работало, так как это вход в текстовое поле, но я попробовать его, и он просто показывает HTML. (Для записи данные пользователя немедленно исчезают, они отправляются.)

• Вызовите поисковую систему браузера и передайте его поисковый запрос. Мне не удалось найти способ сделать это по трем пунктам: я не могу найти способ запускать Ctrl + f программно, ввести поисковый запрос в окно поиска браузера и программно запрограммировать поиск в браузере.

• Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html Это способно выделять несколько записей на странице, но не в текстовых областях, которые, насколько я вижу, игнорируются. Я считаю, что я настроил его и вывел его правильно, потому что я могу заставить его выделить несколько текстовых полей на странице. Он работает, добавляя <span class="highlight">Search result</span>.

• Этот http://frightanic.com/projects/jquery-highlight/ от fightanic дает результаты, аналогичные плану Burkard's.

• Этот http://www.jquery.info/The-plugin-SearchHighlight от Renato нацелен на результаты поисковой системы, так что это не мой прецедент.

• Этот http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html отфильтровывает пункты, которые не содержат соответствие строки, так что я не пробовал, но демо показывает, что он использует <span style="background:yellow;color:#000000">Search result</span>, чтобы выделить, как и другие, так что я сомневаюсь, что это будет работать на текстовых областях ,

Answer 1

• Тот, который, после того, как некоторые игры вокруг, сделал то, что я хотел: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/

Некоторые пункты отметить.

1. Текстовые области не могут быть изменены. В документации говорится об этом, но также и в документе опция «resizable» и говорит, что требуется изменить размер jQueryUI. Я попробовал это, и это не сработало. Я предполагаю, что это было намерение, но не было отлажено, поскольку автор говорит, что он больше не работает над плагином.

2. Я использую это с colorbox, и нашел, что мне пришлось .highlightTextarea("destroy"), а затем .highlightTextarea("disable"), когда пользователь покидает форму или выделяется при просмотре записей, у которых не было хитов.

3. В некоторых случаях CSS противоречил моей и испортил форму, поэтому, когда пользователь отменяет поиск, я получаю форму из DOM и перестраиваю ее. Вероятно, это связано с тем, как я использую плагин, а не лучшим решением, но я не мог найти, как его решить. Результат теперь кажется твердым и обеспечивает эффект, который я пытался найти так долго.