SuggestionTextFieldMenu-SwiftUI
My project about a suggestion field in swiftUI
This is how it looks like!
You can fill an array of objects and decide how many lines you want to show. I decided to show just a max of 3 lines and reduce them one by one through the filter.
So let’s start from the beginning!
First of all, I created a struct that will contain my universal component. Declare the variables that you need, in this case, I declared these:
@Binding var editing: Bool
@Binding var inputText: String
@State var verticalOffset: CGFloat
@State var names: [String] = []
@State var horizontalOffset: CGFloat
after i decided to filter my array in that way:
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content="private var filteredTexts: Binding { Binding (
get: {
return names.filter { $0.contains(inputText) && $0.prefix(1) == inputText.prefix(1) } },
set: { _ in })
}
“>
private var filteredTexts: Binding<[String]> { Binding (
get: {
return names.filter { $0.contains(inputText) && $0.prefix(1) == inputText.prefix(1) } },
set: { _ in })
}
I added an initializer with all that I need:
<div class="snippet-clipboard-content position-relative" data-snippet-clipboard-copy-content=" public init(editing: Binding, text: Binding, verticalOffset: CGFloat, horizontalOffset: CGFloat) {
self._editing = editing
self._inputText = text
self.verticalOffset = verticalOffset
self.horizontalOffset = horizontalOffset
}
“>
public init(editing: Binding<Bool>, text: Binding<String>, verticalOffset: CGFloat, horizontalOffset: CGFloat) {
self._editing = editing
self._inputText = text
self.verticalOffset = verticalOffset
self.horizontalOffset = horizontalOffset
}
And here the core part, inside the body Add in this order: ScrollView, LazyVStack, and a ForEach to handle the showing of the view here’s the code:
3 ? 3: filteredTexts.wrappedValue.count)))
“>
ScrollView {
LazyVStack(spacing: 0) {
ForEach(filteredTexts.wrappedValue, id: \.self) { textSearched in
Text(textSearched)
.contentShape(Rectangle())
.onTapGesture(perform: {
inputText = textSearched
editing = false
self.endTextEditing()
})
Divider()
.padding(.horizontal, 10)
}
}
}.frame(maxWidth: .infinity,
minHeight: 0,
maxHeight: 50 * CGFloat( (filteredTexts.wrappedValue.count > 3 ? 3: filteredTexts.wrappedValue.count)))
Finally, to use this just add a ZStack and inside put SuggestionTextFieldMenu, based on the position, you can show it above or under a text field. This method is not perfect, I tried to add a text field directly inside the universal component but when the small view comes up the entire view move. Please if you know how to reach that goal feel free to text me! Cheers
