HelPHP Javascript Documentation

Class: H_ui_autocomplete

H_ui_autocomplete

UI class for autocomplete input fields.
Handles search, selection, and keyboard navigation.
Possible settings for H_ui_autocomplete:
- name: string (name of the field)
- table_name: string (table to search in)
- field_name: string (field to search in)
- submit: boolean (submit the form on selection)
- new_value: boolean (allow entering a new value)
- toreturn: string ('id' or 'text', value to return on selection)
- confirm: string|boolean (confirmation message on selection)
- callback: string|function (function name or function to call on selection)
Used as h.libs.ui_autocomplete.

new H_ui_autocomplete(dom_id)

ui.js, line 1994

Name	Type	Description
`dom_id`	string	dom_id for the created autocomplete

Members

instancesObject

Stores all autocomplete instances by dom_id.

Methods

add_active() ui.js, line 2242

Adds the active (highlighted) class to the current result item.

clean() ui.js, line 2265

Cleans up the autocomplete instance.
(Currently empty, override if needed.)

close() ui.js, line 2178

Closes the autocomplete dropdown.
Removes click outside event.

display_search_result(result, open) ui.js, line 2109

Displays the search results in the dropdown.
Adds event listeners to each result item for selection.

Name	Type	Description
`result`	string	HTML string of results.
`open`	boolean	Whether to open the dropdown.

exist(){boolean} ui.js, line 2257

Checks if the autocomplete input exists in the DOM.

Returns:

Type	Description
boolean	True if exists.

on_click_search_result(evt) ui.js, line 2125

Handles click event on a search result item.
Sets the value, closes the dropdown, and triggers callback or confirmation if needed.

Name	Type	Description
`evt`	Event	The click event.

on_focus(evt) ui.js, line 2059

Handles focus event on the input field.
Opens the autocomplete dropdown with show()

Name	Type	Description
`evt`	Event	The focus event.

on_hover_search_result(evt) ui.js, line 2151

Handles mouse hover on a search result item.
Updates the active (highlighted) result.

Name	Type	Description
`evt`	Event	The mousemove event.

on_input(open) ui.js, line 2067

Handles input event on the search field.
Sends AJAX request if input length > 1 and displays results.

Name	Type	Default	Description
`open`	boolean	true	optional Whether to open the dropdown after input.

on_key_down(evt) ui.js, line 2191

Handles keydown events for navigation and selection.
Supports ArrowUp, ArrowDown, Enter, and new value logic.

Name	Type	Description
`evt`	KeyboardEvent	The keyboard event.

remove_active() ui.js, line 2249

Removes the active (highlighted) class from the current result item.

scroll_to_active() ui.js, line 2223

Scrolls the dropdown to ensure the active item is visible.

show() ui.js, line 2166

Shows the autocomplete dropdown.
Adds click outside event to close it.

staticH_ui_autocomplete.clean_instances() ui.js, line 2297

Cleans up all autocomplete instances that no longer exist.

staticH_ui_autocomplete.create_instance(dom_id, settings){H_ui_autocomplete} ui.js, line 2282

Creates a new autocomplete instance for a given dom_id.
Cleans up any existing instance for the same dom_id.

Name	Type	Description
`dom_id`	string	The DOM id suffix.
`settings`	Object	Settings for the instance.

Returns:

Type	Description
H_ui_autocomplete	The created instance.