Search box UI in apps script - google-apps-script

We are in implementing a search box for searching comments in Google sites with the help of Google Apps Scripts, which is stored in the scriptdb.
In the UI side now we implemented a textbox and a listbox below that to list the suggestions from the scriptdb, It works as shown in the below img.
And now i'm trying to make the typed string to bold in the listbox below to give some more flexibility to user to find where the exact string is in the suggestion box. Like in the below image.
And In a listbox control, We can set styleAttribute to make bold or change font color for the added item.
Ex:
app.createListBox().addItem("SELECT").setStyleAttribute("color","red");
The above statement will set the style attribute for all the list box items.
But How to set style attribute for a particular character in the added item
listbox.addItem("HELLO world")
The issue is to set style attribute for only the upper case letter of the above addItem in the list box.
It ll be more useful and reduce the developers complexity in the Google Apps Script.
And also I raised this as enhancement in the issue tracker in issue 2293.
If is there any more work around, Pls suggest here. It ll be helpful for everyone, who is in need of this feature.
Tnx,
Chocka.

There is no workaround in UiService. You can use HtmlService which allows custome HTML and javascript code

Related

Change the appearance of drop downs

Dropdowns are useful, but they would be even more useful if the dropdown options could be formatted. For example, using bold or italic text for various selections, or changing the background color of other options on the dropdown display.
It's easy to have a cell formatting change according to the dropdown selected, but that's not what I'm trying to do. I want the formatting of the the dropdown items to be different than simple plain text.
I'm not sure changing the colour of data validation options is possible, but you can exploit the fact that Unicode fonts include italic and bold versions in their extended character sets, and use these characters instead of the usual ones to achieve some of what you want. Use an online tool like (for instance) https://yaytext.com/bold-italic/ to give you the bold/italic versions of your required text options, and add these to your validation list.
It sounds like you are asking for a way to change the appearance of the control that appears when you click the dart in a drop-down cell. The built-in controls in Google Sheets cannot be customized that way.
To implement your own custom controls, use Apps Script to implement a custom dialog box or a sidebar.
A simple script that, for example by selecting a value in a column 5 (change), changes the formatting of the text? Or do you want the text in the validation to be changed?
function onEdit(e) {
if(e.range.getRow()>1 && e.range.getColumn() ==5){
e.source.getActiveRange()
.setFontSize(11)
.setFontWeight('bold')
.setFontStyle('italic')
.setFontLine('line-through')
.setFontColor('#ff0000')
.setBackground('#ffff00')
};
}

Is it possible to highlight some text without changing the content of the document with Apps Script?

I'm developing a Google Doc add-on with Apps Script. When clicking on a button, I want to highlight (underline or set a different background color) some given words in the entire document.
I know how to format text with Apps Script. I could underline the words with
text.setUnderline(true)
but in that case it would underline the text changing its actual format in the document. I'm looking for a way to highlight (again, underline or set a background color) the words without changing the internal content of the document. In other words, I don't want the highlights to be persisted for the future.
To better understand what I'm asking, the new format of the highlighted words must not be present when printing the document or sharing it with another user who has not installed the add-on.
The idea is to develop a custom spell/grammar checker, and I want to highlight the misspelled or incorrect text as the Google Docs' integrated spellchecker does, without persisting the red underlines in the document.
Notes:
The question is similar to this one and this one, but for Apps Script instead of Microsoft Office API.
I've been suggested to use "suggested edits", referring to this question. I'd like to note this is not what I'm looking for, because the suggested edits would be persisted and they would be visible for anyone opening the document, having my add-on installed or not.

Google Script: Using an input text box in a form that pulls items from the sheet and presents as options

I am currently developing a program in Google Script that works with Google Sheets. I've created a tab that serves as the UI and have multiple tabs for each data type to store the data.
When I first started, I originally reserved some cells on the UI tab that I used as the inputs for creating a parent-child relationship instance. To do this, I directly set validation on each of the cells and used the "List from a range" Criteria to provide the drop-down list to provide the options to select from.
Now, I am trying to move this input off of the cells in the UI tab and into the sidebar. I am now using HTML Service and am creating a form to handle this functionality. However, I can't figure out where to get started to provide the same drop-down functionality for each of the text inputs in the form as I had when I used the cell validation.
Does anyone know what syntax is used to do this?
Thank you,
Nicholas Kincaid
jQuery auto-complete combo-box is what will take care of this => jqueryui.com/resources/demos/autocomplete/combobox.html

Autocomplete text box in Google Script

I've am new to Google App Script. I have a spreadsheet that has various fields. I need to create a text box that displays the results from a particular field as I type the characters in the text box. I can do this like type the text and then hit a button and then display the results or the rowindex. But what I need is to an instant result showing up in a drop down box. Thanks. Any information would be helpful.
This is a good application to use HtmlService with jQuery-UI. Take a look at Populate jQuery autocomplete list using value array from Google Spreadsheet for an example that does just what you're describing.
See also this library that uses UiApp only
https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/suggest-box

Sample HTML code for a complex form control (see mockup)

I have tried searching for this but I do not know the name of the control or UI so I am not having any luck. I'd like to know if there is a name for this UI and if you know of a good link to sample html that would be ideal.
It will be used inside of a jQuery UI dialog box as well as on a standard page within a web app.
Thanks!
You need to use a two-sided multi-select list...
The jQuery two-sided multi-select list converts a normal drop down list into the mock-up you've posted and automatically moves selected items over to the right-hand list as well as adding buttons for movement (plus you can double-click items to move them back and forth).