B4A Library [B4X] [XUI] AS AutoComplete based on AS SelectionList

This is an AutoComplete view, which is compatible with B4XFloatTextField, AS_TextFieldAdvanced, EditText (B4A), TextField (B4i) and TextField (B4J)

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee.

You need:

• AS_SelectionList V2.03+

Setup for B4A
Settings you need to make in your B4A project

1. Go to Main Module
2. Declare ime in the globals

Sub Globals
    Private ime As IME
End Sub

1. Initialize and AddHeightChangedEvent to the Activity_Create sub

Sub Activity_Create(FirstTime As Boolean)
    Dim pm As B4XPagesManager
    pm.Initialize(Activity)
 
    ime.Initialize("IME")
    ime.AddHeightChangedEvent
End Sub

4. Add the IME_HeihgtChanged event

Sub IME_HeightChanged (NewHeight As Int, OldHeight As Int)
    B4XPages.GetManager.RaiseEvent(B4XPages.GetManager.GetTopPage, "B4XPage_KeyboardStateChanged", Array(Activity.Height - NewHeight))
End Sub

5. Add the following in the Manifest Editor

SetActivityAttribute(main, android:windowSoftInputMode, adjustResize|stateHidden)

Setup for B4X
Add this to the B4XPage you want to use the AS_AutoComplete

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    AS_AutoComplete1.Resize(Width,Height)
End Sub

Private Sub B4XPage_KeyboardStateChanged (Height As Float)
    AS_AutoComplete1.KeyboardStateChanged(Height)
End Sub

Example

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private TextField1 As B4XView
    Private AS_AutoComplete1 As AS_AutoComplete

    Dim sql1 As SQL

End Sub

    AS_AutoComplete1.Initialize(Me,"AS_AutoComplete1",Root,TextField1)
    AS_AutoComplete1.SetDataSource1(sql1,"dt_Country","name","code")

Private Sub TextField1_TextChanged (Old As String, New As String)
    AS_AutoComplete1.TextChanged(New)
End Sub

Examples

[B4X] AS AutoComplete - Custom Datasource and Icons

https://www.b4x.com/android/forum/threads/b4x-xui-as-autocomplete-based-on-as-selectionlist.164908/ In this example I will show you how you can use your own data source and also display icons. In this example I use a SQLite database with all countries and flags Custom Datasource If you...

www.b4x.com

AS_AutoComplete
Author: Alexander Stolte
Version: 1.00

Spoiler: Properties, Functions, Events, etc.

• AS_AutoComplete
  • Events:
    • ItemClicked (Item As AS_SelectionList_Item)
    • RequestNewData (SearchText As String)
  • Fields:
    • Tag As Object
  • Functions:
    • Close
    • CreateItem (Text As String, Icon As B4XBitmap, Value As Object) As AS_SelectionList_Item
    • Initialize (Callback As Object, EventName As String, RootPanel As B4XView, InputView As B4XView)
      InputView - Can be any view, e.g. B4XFloatTextField or AS_TextFieldAdvanced
    • KeyboardStateChanged (Height As Float)
      The view can automatically keep the items in the list visible even when the keyboard is out
      And the keyboard remains open when the menu is closed
    • Resize (Width As Float, Height As Float)
      If the RootPanel resize
    • SetDataSource1 (Database As SQL, TableName As String, SearchColumn As String, ValueColumn As String) As AS_AutoComplete_DataSource1
    • SetNewData (ItemList As List)
    • Show
    • TextChanged (Text As String)
  • Properties:
    • AfterItemClickCoolDown As Long
      How long should the TextChange event be ignored after an item has been clicked on?
      Should prevent the autocomplete from opening again as soon as the text is added to the text field
      Default: 1000 = 1 Second
    • AnimationDuration As Long
      The duration for the opening and closing animation of the popup
      Default: 150 - Ticks/Milliseconds
    • AutoCloseOnItemClick As Boolean
      Should the dialog close automatically when an item is clicked
      Default: True
    • AutoCloseOnNoResults As Boolean
      Closes the autocomplete if no search results are found
      Default: True
    • MaxVisibleItems As Int
      Default: 5
    • SearchTextHighlightedColor As Int
    • SuggestionMatchCount As Int
      The minimum number of matching characters required to trigger suggestions with highlighted matches
      Default: 2
    • TextField2ListGap As Float
      The Gap between the TextField and the top of the List
      Default: 5dip
    • Theme As AS_SelectionList_Theme [write only]
    • Theme_Dark As AS_SelectionList_Theme [read only]
    • Theme_Light As AS_SelectionList_Theme [read only]

Changelog

• 1.00
  • Release
• 1.01
  • New FontToBitmap
  • New TextToBitmap
  • BugFixes and Improvements
• 1.02
  • New DisableTextChanged - If True then the menu is not opened via the TextChanged property
    • e.g. If you assign a text to the TextField in the code, the menu would otherwise be opened
  • BugFix DataSource1 had a logic error where duplicate entries were seen
• 1.03
  • New SetCustomLayout - You decide where the Auto complete list should appear
  • New StandoutTextField
    • Default: True
    • If True, the background is darkened and the text field is brought to the foreground
    • If False, the list is simply displayed
      • The background panel remains transparent and the autocomplete is closed as soon as you click next to the menu
  • New get SelectionList

Github: github.com/StolteX/AS_AutoComplete

Have Fun

 

[superkan]

This looks great. Liking it before I will use it. Sure it will spawn its own use cases. Always appreciate the color support and attention to detail.

 

[Alexander Stolte]

Thank you, if you have questions, then always create a new thread, thanks

 

[Alexander Stolte]

Update

• 1.01
  • New FontToBitmap
  • New TextToBitmap
  • BugFixes and Improvements

A new example of how you can use your own data source and display icons:

[B4X] AS AutoComplete - Custom Datasource and Icons

https://www.b4x.com/android/forum/threads/b4x-xui-as-autocomplete-based-on-as-selectionlist.164908/ In this example I will show you how you can use your own data source and also display icons. In this example I use a SQLite database with all countries and flags Custom Datasource If you...

www.b4x.com

 

[Alexander Stolte]

Update

• 1.02
  • New DisableTextChanged - If True then the menu is not opened via the TextChanged property
    • e.g. If you assign a text to the TextField in the code, the menu would otherwise be opened
  • BugFix DataSource1 had a logic error where duplicate entries were seen

DisableTextChanged

    AS_AutoComplete1.DisableTextChanged = True
    xtf_Name.Text = m_Task.Name
    AS_AutoComplete1.DisableTextChanged = False

 

[Alexander Stolte]

Update

• 1.03
  • New SetCustomLayout - You decide where the Auto complete list should appear
  • New StandoutTextField
    • Default: True
    • If True, the background is darkened and the text field is brought to the foreground
    • If False, the list is simply displayed
      • The background panel remains transparent and the autocomplete is closed as soon as you click next to the menu
  • New get SelectionList

SetCustomLayout

AS_AutoComplete1.SetCustomLayout(TextField1.Left,TextField1.Top + TextField1.Height + 20dip,TextField1.Width,400dip)

SetCustomLayout + StandoutTextField = False
If you use both properties, you can create an autocomplete that does not interfere with the touch inputs of the other views on the screen and display the menu where you need it.

Real world usecase: