Skip to main content

Overview

JSearchInput is a sophisticated search input component with autocomplete/suggestions functionality. It extends HBox and provides a search icon, text field, clear button, and a popup for displaying suggestions.

Constructor

JSearchInput()
constructor
Creates a new JSearchInput with default configuration.
JSearchInput searchInput = new JSearchInput();

Methods

Configuration Methods

setPromptText(String text)
JSearchInput
Sets the placeholder text for the search input.
searchInput.setPromptText("Search for products...");
setText(String text)
JSearchInput
Sets the current text value of the search input.
searchInput.setText("initial query");
getText()
String
Gets the current text value of the search input.
String query = searchInput.getText();
setClearable(boolean clearable)
JSearchInput
Sets whether the clear button should be shown when text is present.
searchInput.setClearable(false);

Suggestion Methods

setSuggestionProvider(provider)
JSearchInput
Sets a dynamic suggestion provider that generates suggestions based on the current input text.
searchInput.setSuggestionProvider(query -> {
    // Fetch suggestions from API or database
    return productService.searchProducts(query);
});
setSuggestions(List<String> staticSuggestions)
JSearchInput
Sets a static list of suggestions that will be filtered based on the current input text.
List&lt;String&gt; countries = Arrays.asList("United States", "Canada", "Mexico", "Brazil");
searchInput.setSuggestions(countries);
setOnSearch(Consumer<String> callback)
JSearchInput
Sets a callback to be invoked when a search is committed (Enter pressed or suggestion selected).
searchInput.setOnSearch(query -> {
    System.out.println("Searching for: " + query);
    performSearch(query);
});
getTextField()
TextField
Gets the internal TextField for advanced customization.
TextField field = searchInput.getTextField();
field.setMaxWidth(400);

Keyboard Navigation

The component supports comprehensive keyboard navigation:
Enter
Key
Commits the current search query and invokes the onSearch callback
Escape
Key
Closes the suggestions popup
Down Arrow
Key
Moves focus to the first suggestion in the popup, or opens the popup if closed
Up/Down Arrows
Key
Navigate between suggestions in the popup
Up Arrow
Key
Returns focus to the text field

Style Classes

j-search-input
CSS class
Applied to the root HBox container
j-search-icon
CSS class
Applied to the search icon (magnifying glass)
j-search-field
CSS class
Applied to the internal TextField
j-search-clear
CSS class
Applied to the clear button (X icon)
j-search-popup-box
CSS class
Applied to the VBox containing suggestions
j-search-popup-scroll
CSS class
Applied to the ScrollPane wrapping the suggestions
j-search-popup-item
CSS class
Applied to individual suggestion items

Usage Example

Basic Search Input

import com.jjarroyo.components.JSearchInput;
import javafx.scene.layout.VBox;

public class SearchExample {
    public VBox createSearchBar() {
        VBox container = new VBox(10);
        
        JSearchInput searchInput = new JSearchInput();
        searchInput.setPromptText("Search products...")
                   .setOnSearch(query -> performSearch(query));
        
        container.getChildren().add(searchInput);
        return container;
    }
    
    private void performSearch(String query) {
        System.out.println("Searching for: " + query);
        // Implement search logic
    }
}

With Static Suggestions

import com.jjarroyo.components.JSearchInput;
import java.util.Arrays;
import java.util.List;

public class CountrySearch {
    public JSearchInput createCountrySearch() {
        List&lt;String&gt; countries = Arrays.asList(
            "United States", "Canada", "Mexico", "Brazil", 
            "Argentina", "United Kingdom", "France", "Germany"
        );
        
        JSearchInput searchInput = new JSearchInput();
        searchInput.setPromptText("Search countries...")
                   .setSuggestions(countries)
                   .setOnSearch(country -> {
                       System.out.println("Selected country: " + country);
                   });
        
        return searchInput;
    }
}

With Dynamic Suggestions

import com.jjarroyo.components.JSearchInput;
import java.util.List;

public class ProductSearch {
    private ProductService productService;
    
    public JSearchInput createProductSearch() {
        JSearchInput searchInput = new JSearchInput();
        
        searchInput.setPromptText("Search products...")
                   .setSuggestionProvider(query -> {
                       // Fetch dynamic suggestions from API/database
                       if (query == null || query.isBlank()) {
                           return List.of();
                       }
                       return productService.searchProducts(query);
                   })
                   .setOnSearch(productName -> {
                       // Handle product selection
                       Product product = productService.findByName(productName);
                       showProductDetails(product);
                   });
        
        return searchInput;
    }
    
    private void showProductDetails(Product product) {
        // Display product details
    }
}

Without Clear Button

JSearchInput searchInput = new JSearchInput();
searchInput.setPromptText("Search...")
           .setClearable(false)
           .setOnSearch(query -> performSearch(query));

Behavior Details

Suggestions Popup

  • Auto-hide: The popup automatically closes when focus is lost
  • Width: The popup matches the width of the search input
  • Max Height: Limited to 250px with vertical scrolling
  • Position: Appears 4px below the search input
  • Trigger: Opens when suggestions are available and text changes

Clear Button

  • Visibility: Shown only when text is present and clearable is true
  • Action: Clears the text, closes popup, and returns focus to the input

Text Changes

  • Text changes automatically trigger the suggestion provider
  • Empty or null suggestion lists hide the popup
  • Suggestions are filtered case-insensitively when using setSuggestions()

See Also

Build docs developers (and LLMs) love