How to highlight multiple search results in input multiple textareas - javascript

I have been trying to highlighting multiple search result hits in the textareas - multiple textareas - of a form.
After much searching and many trials I found a solution while I was preparing this question for S.O. but before I submitted it. I thought it worth recording here to save time for anyone else with the same problem. I hope this is an acceptable thing to do on S.O. If not, moderators, please delete.
In the app I'm working on, users enter text and it is stored in MySQL where each record corresponds to a form. Users can recall any record for editing, and when they do, they will be presented with the previously-entered data in text areas again to modify. This all works.
Now, I've implemented a search function to search the whole table, and when the user recalls a record, I want to present it in the form for editing, with any and all search hits on a page highlighted - e.g. like this:
(source: informationtamers.com)
That's simplified, the actual form is longer, so the user may not notice other hits on the page.
I've made it work with a highlight for the first occurrence of the hit string if it's present in the form, but the problem comes when the string appears multiple times in one text area, or in multiple text areas on the same form.
I have tried these approaches:
setSelectionRange: This is the only one that even half-way works, but highlights only one string per form. This makes sense because AFAIK you can't have more than one item selected in an html input field or form and as a UI for someone looking for the results of a search it's not very user-friendly.
add style at the appropriate points in the input text: <span style="background-color: yellow">ZZZZ</span>
I didn't expect this to work, as it's input in textarea, but I did try it and it just shows the html. (For the record, the user's data is escaped immediately it's submitted.)
Invoke the browser's own search facility and pass it the search term. I failed to find any way of doing this on three counts: I can't find a way to trigger Ctrl+f programatically, inject the search term into the browser's search box and initiate the browser search programatically.
Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
This is capable of highlighting multiple entries on a page, but not in textarea fields, which as far as I can see it ignores. I believe I've set it up and invoked it correctly, because I can get it to highlight multiple text area captions on the page. It works by adding <span class="highlight">Search result</span>.
This http://frightanic.com/projects/jquery-highlight/ from frightanic gives results the same as Burkard's plugin.
This http://www.jquery.info/The-plugin-SearchHighlight from Renato is targeted at search engine results, so is not my use case.
This http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html filters out paragraphs that don't contain a matching string so I didn't try it, but the demo shows that it uses <span style="background:yellow;color:#000000">Search result</span> to highlight, like the others, so I doubt it would work on text areas.

The one that, after some playing around, did what I wanted: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/
Some points to note.
The text areas must not be resizable. The documentation says this, but also documents an option 'resizable' and says that the jQueryUI Resizable is required. I tried this and it did not work. I guess it was an intention but was not debugged, as the author says he's no longer working on the plugin.
I'm using this with colorbox, and found I had to .highlightTextarea("destroy") and then .highlightTextarea("disable") when user leaves the form, or the highlights appeared when viewing records that had no hits.
In some circumstances, the CSS conflicted with mine and messed the form up, so when the user cancels the search, I .remove the form from the DOM and rebuild it. This is probably due to the way I'm using the plugin, and not the best solution, but I couldn't find how else to resolve it.
The result now seems to be solid, and provides the effect I was trying to find for so long.

Related

Script to fill a value automatically in the webpage input box

My job is to order diagnostic tests for patients and I need to write 6-7 characters value for each diagnostic test. I have 24 different values and I need to fill it many thousands of times. I am thinking to create 24 different scripts with Tampermonkey to speed up my job by clicking on the script box.
So the thing is that I need to fill this
box. Here are the input id and everything of that box in the console. Then I type the value manually, I get popup list which updates every time I type one character (same principle as google or youtube search box), here is the popup list after I type a value and if I want that diagnostic test, I need to click on it from the popup list, I cannot just simply click enter. So this is the code I have to fill the box by a value:
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '15002 '
})
The script fills the value, but the popup list doesn't appear and I need to click on the box, delete one character and write it again to get a list and then to choose a diagnostic test from it. Still, time-consuming.
I wonder, is it possible to make a script to add automatically a diagnostic test from the list like this example? If no, is it somehow possible to make that popup list would appear and I won't need to click on the box, delete one character and write it again? At least, could I make that the box is clicked after a value has been filled? I tried this code but doesn't work: document.querySelector("input#generic_test_order_search.ui-autocomplete-input").click()
Please help me to make it as automatic as possible, which would save me hundreds of hours in the long-term.
1 - As for the second part of the question. Picture 4.
It is pretty simple to make an auto-fill for the dropping parametres, we just might need the html-code of the elements.
For example,
document.getElementsByTagName('input')[0].click(); clicks the first input checkbox from the first input
document.getElementsByTagName('select')[0].selectedIndex = 1; selects the second value from the first select
document.getElementsByTagName('button')[0].click();clicks the first button
To make it more precise you might use class at first, at then tag:
document.getElementsByClassName('testClassDependingOnExistingClasses')[0].getElementsByTagName('button')[0].click(); for example.
Anything you do manually on a page like that can be done automatically with JS.
2 - As for the first part of the question. Picture 2.
Here is the part of the answer.
How to trigger arrow down press in js?
Maybe this code might help, but not enough information, since no data on html-code of the dropped elements.
document.getElementById('generic_test_order_search').clildren[0].click();

Read Only equivalents for other inputs in html/JS

Background
I have a basic CRUD form/webapp. It happens to be react/redux but for our purposes it doesn't matter much. I'm pretty sure this is an HTML question.
The form itself represents a 'legal document' a bit, and multiple users log in to view/edit it at once. (think kinda google docs ish)
Some users can only view, some can edit.
The Problem
I want my edit users to be able to use the form elements (input/select etc) to modify the data, and my view users to see that same data as similarly as possible.
I want my view users to be able to copy and paste from the screen.
The disabled and readOnly flags won't quite work.
Failed Solutions
Disabled: With a little CSS magic is looks perfect, and the view users don't get onclick reactions they shouldn't. BUT you can't copy and paste the text. This is the current state of the app.
ReadOnly: Isn't supported by many of the inputs I have (select, radio, etc) although it's pretty much perfect for text and texarea.
The Question
Is there a reasonable or elegant way to achieve behaviour like ReadOnly but across all HTML elements?
Clarifications
Since the current view of the page is exactly what I want my view users to see (it's made to look like a paper form a little) If I chose to use 'view mode' spans for my components or a 'view page' mode I would end up having a to make them look as much like my current inputs as possible. It feels weird/bad to try and make a precise recreation of what I have out of spans and divs instead of making what I have behave correctly. Still... it's the backup plan.
We are using all kinds of inputs. Selects and dates and checkboxes oh my. Text and Texarea are well behaved, but the rest get less well behaved.
Readonly propperty is only supported by input and textarea, check caniuse.
As it has been said in a comment, replace input elements by others that don't allow insert data and re-style the elements to look similar if that's what you want.

Hide divs based on a wildcard or text entered in a form

All. I'm a noob at working with Javascript and haven't been able to find posts on what I'm looking to do. Let me set the stage, I have a page on an internal Confluence wiki that lists out all 500+ vendors. I would like to create a form that would allow users to enter a keyword into a text box and have the page only show the vendors with that match. For example, if the vendor div contains the words "Joe Schmoe", only the vendor divs with that word will show.
As I mentioned, this is being used on a Confluence wiki site and I've had a real problem trying to get jquery to work in the environment-especially with IE. I'm hoping to find a reasonable js solution that I can use. Any ideas?
Thanks!

Applying Choices in Fields using View in Lotus Domino Web application

I can't quite figure out a work around for using "Use view dialog for choices" in a web based application.
My Question is how can i convert this settings in my field in the Control Tab then Choices, in choices "Use view dialog for choices" then Use current database and access view and a specific column.
Thanks in advance :)
"Use view dialog for choices" is almost always a way to get around the restrictions on the return value of a formula. For instance, you'd use it when #DbColumn in a choices formula for a listbox or dialog list choices formula would cause an error.
The upshot of that is that there's no "one-shot" workaround for the web. A direct functional replacement would be to open the view in a pop-up window or overlay div, and attach some JavaScript to the view in order to override the default web behaviour and force the return of values to a field on the main document. This approach will work well, but it may require server settings that allow the entire view to be served at once (the maximum lines to display per page will probably be less than you need), and it's subject to breakage if the HTML used to display the view ever changes.
You can use LotusScript or Java in a WebQueryOpen agent to populate a conventional widget (the list of a element) in a Rich Text field, either using PassThru HTML or a "Treat contents as HTML" form. That would involve getting the view, then doing a document-by-document (or category-by-category) run through the view index to get the column values you need. (If you take this approach, use the ColumnValues rather than the document field name to retrieve the values -- the cost of opening the document to read the values is high, and your code will take many times longer to run.)
You can also get the view as need using an AJAX request and a ?ReadViewEntries query, which will return an XML representation of the view. Again, you may have to have the maximum view lines per page limit upped in order to get the amount of data you need. You can get around that, though, by using a "suggest" method that doesn't begin retrieving data until the user enters at least one character into the field.
All of these approaches mean using a separate form for the web. That's easy enough -- you simply create a form with the same alias (or name, if you're not using aliases) as the one you're using for the Notes client. In the list of forms in Designer, you can use the hidewhen tab to hide one from the Notes client and the other from the web. (Note that you can create an additional form for mobile devices the same way if necessary.)
I can't get more specific than this with the information at hand. If this is insufficient to point you in the right direction, then edit your question to be more specific (and post a comment to this reply -- I don't spend a lot of time on SO, but I do spend time on other StackExchange sites, so I'll be notified).
Unfortunately, you have to develop it yourself.
http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=AJAX%20Name%20Picker
AJAX-based name picker is a good start I guess.

Special print style for different print buttons with after-print removal

I am working on a page which will have an area at the bottom listing out groupings of FAQs with a few different tab levels and then questions which can be expanded/collapsed by the user. We want to provide a way for the user to be able to nicely print
Just the questions/answers they have expanded
All the questions/answers in the sub-group they have selected
All the questions/answers in the primary group they have selected
All the questions/answers on the page
The plan is to have a drop down box with a print button (unhidden by Javascript) that would apply a class that when clicked that would hide the other content on the page and give us the display we want for the user selected option. This is all easy enough to do and we can apply a default print-style using #4 as a catch-all when javascript is disabled which can just be triggered via the normal print mechanism.
The problem is how to remove that special style when the printing is done so that if the user were to go and click the browsers print button, they get what they expect a print out of the whole page instead of the last selected "special" print view.
I have thought up a few potential solutions but I am not entirely happy with any of them:
We could replace our planned in page print with a link to another page which formats itself without interfering with the rest of the page content. I don't like this idea because it breaks the page into pieces and if possible I always prefer to keep the user on the page.
We could set a timeout when the print button is clicked to remove our special class after some period of time bringing the page back to a default state. I don't like this because it will produce unpredictable behavior from the user's point of view. If they take "too long" printing the first time they don't get the style they want. If they print the whole page "too quickly" after the special print they get an odd result
We can use the after-print trigger in IE to remove the style for those users, but as far as I can tell this sollution is only an option in IE and leaves all the other browsers in the cold.
We could make a general assumption that a user is very unlikely to come to the page and do a special formatted print followed by a desire to print the entire page and just let is go at that.
Any other solutions anyone can think of?
Your first solution is actually very good if you use target="_blank". This would keep the user on the page but avoid all the other problems.
However, I think the whole problem is moot if you make the page layout match the dropdown. In other words, if they're looking at Section 2, Subsection 3, Question 1, and they select
"print all questions in subsection", just expand the subsection and open the print dialog box. Then you only have to worry about setting a single class (noprint) and apply it to everything else.

Categories

Resources