experiences with TWebEditAutoComplete

[Kounalakis_Dimitris]

I tried to play a bit with TWebEditAutoComplete and I really loved again the RAD way of working with VCL/FMX

First of all, TWebEditAutoComplete.EndUpdate; is requested for the items added to be shown. It is missing from the documentation

Secondly, onSelect event gives you the index that was selected but any change to TWebEditAutoComplete.Text from this event is lost and the selected line from the droplist is assigned to the TWebEditAutoComplete.Text. I have not find a way to set the Text property to eg the first three characters from line selected.

is it possible to set an integer value for each item like we do in VCL?
eg TWebEditAutoComplete.items.addobject('label',Tobject(1));
or i:=integer(i_icpc1.Items.Objects[0]);
I tried to cust it to Jsvalue before, but it does not help

Bootstrap can mess it all for the components.
I found that the right scrollbar is missing from the TWebEditAutoComplete.dropitems just because of having bootstrap in the application's index.html. Is there a way to fix it?
How to reset to web core's css settings for a control if needed? I have tried to set css style to all:unset through "unit".html but it does not help

[Kounalakis_Dimitris]

For the last I found from previous forum questions that setting popupheight to a big number can help, but even with this modification the scrollbar is shown outside of the popup dropitems (it is in the page). I can live with that, but....

It is also impossible for me to see the css properties in the browser for popitems Input html tag in the source through the dev console. Any click or mouse movement in the console close the dropdown menu and clear the tag's properties. How to inspect it?

Thank you in advance

[Kounalakis_Dimitris]

An other question is how to make the list drop-up, instead of drop-down. It is much more user friendly if the scroll bar goes to the page. And how to change its width, as now it follows the text box width.

Thank you in advance

[Kounalakis_Dimitris]

I gave up with TWebEditAutoComplete.
Custom interface is now better thanks to web core pascal code.

Concerning "items.addobject('label',Tobject(1))" is there a way to have it in webcore or use FNC "items" with Dataobject, DataInteger, Datastring?

Is there a way to stop CSS inheritance from bootstrap for all CSS properties if needed in a control?

Thank you in advance

[brunofierens]

1. Iems need to be added in a BeginUpdate/EndUpdate block. We will add it to the doc
2. To get the item selected from OnSelect, use:

procedure TForm1.WebEditAutoComplete1Select(Sender: TObject;
  Args: TEditAutoCompleteSelectEventArgs);
var
  idx: integer;
begin
  idx := Args.ItemIndex;
  console.log(WebEditAutoComplete1.Items[idx]);
end;

3. We've seen an issue with OnChange and we fixed this. From OnChange, you'll be able to get the last edited text via WebEditAutoComplete.Text

4. The index with each item is the index of the item in the Items TStringList

5. Do you have more details how exactly you use Bootstrap as I could not see an interference here

6. Items in de dropdown are DIV elements with the CSS classname ItemClassName, ActiveItemClassName