Would anyone know how to make this?

I have been working on an admin command system with the main part being a textbox with autofill, Would anyone know how to make something like this?
image
I have struggled on this, And all support would be appreciated :smile:

1 Like

Well as the player is typing have a table of possible words and check if the characters in the string the player is typing matches

1 Like

String patterns are your friend.

We can try matching the user’s query beginning with the first letters. We can use string.match(someString) or someString:match() to match the query to the command names. ^command is the string pattern we want, as “^” means that the command names should start with the user’s query.

Query: ca

Results (any command that starts with "ca"):
call
cast

Never:
character
pay

For every time the user types (let’s call it userQuery), you can loop through all command names, and run local isQueryMatchingCommand = commandString:match(`^{userQuery}`) for each name. If the user’s query matches a command (if isQueryMatchingCommand then), keep that result in a table. You can then loop through the results and display them in the GUI.

Just a small tip: You can use tildes (or `, the top-left key below Esc). for string interpolation. Combining strings become easy, just like this:

local stringA = "Hello"
local stringB = "World"

print(`{stringA} {stringB}!`) -- Hello World!

Woudln’t that take up lots of data and lots of time having to do the letter to each possible word, Like

 {
  "E", = "Example" -- like this for each command
  "C"
  "H"
  "O"
}

Or is their another way that is more optimal

Sorry, I know I sound really dumb but i’m more of a UI designer, But could you elaborate a little :joy: :+1: 1:

Roblox has a string pattern reference in their docs.

Let’s say, we have a list of commands that do certain things. Ignore the function() ends, just take note of their names.

local commands = {
	anchor = function() end,
	append = function() end,
	character = function() end,
	chat = function() end,
	check = function() end,
	delete = function() end,
	determine = function() end,
	exp = function() end,
	func = function() end,
}

Now, a user wants to type “chat”. For every character typed, get the textbox’s text, and use that to check for commands that start with the text. For now, the user just typed in ch.

local function FindCommandsBeginningWith(Query : string) : {[string] : () -> any?}
	local functionsWithQuery = {} -- Store command names starting with the Query's text.
	local matchPattern = `^{Query}` -- Going with the example query, this equates to "^ch".
	
	-- Loop through each command
	for name : string, commLogic in pairs(commands) do
		-- Match each name using the matchPattern.
		local nameHasBeginningMatch = name:match(matchPattern)
		--[[
		Using the pattern "^ch", the following commands show up:
		
		[ch]aracter
		[ch]at
		[ch]eck
		]]
		
		if nameHasBeginningMatch then
			-- If the name has "ch" as its first letters, remember the function.
			table.insert(functionsWithQuery, commLogic)
		end
	end
	
	-- Finally, send the list of commands
	return functionsWithQuery
end

Now, calling this function will return a list of commands with “ch” in the beginning. We can display them in a Frame, sorted in a list layout (assuming that’s how you would approach it)

local function ListenToUserTyping()
	local intellisenseResults = FindCommandsBeginningWith(inputField.Text)
	
	-- clear the contents of the predictions panel, the frame where the predicted commands will be displayed.
	
	for name in pairs(intellisenseResults) do
		local newLabel = Instance.new("TextLabel")
		newLabel.Text = name
		
		newLabel.Parent = Path.To.Your.Autocomplete.Frame
	end
end

-- We should make the function above listen to any change in the inputField's text:
inputField:GetPropertyChangedSignal("Text"):Connect(ListenToUserTyping)

I don’t know if I made this any clearer, hopefully it does though.

1 Like

Ill test it and tell you the results