Navigation · Elementor
Search (AJAX, live results, filters) widget for Elementor
AJAX search with live results and optional filters. This is a search field, not a posts grid.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
AJAX search with live results and optional filters. This is a search field, not a posts grid.
render() writes HTML data attributes: data-fetch.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-fetch.
Visitor state is stored in localStorage, not in post meta.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Search (AJAX, live results, filters)”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Select Query”, “Category Filter (Pro)”, “Enable Ajax Search (live results)”, “Show Password Protected”. Style and Content tabs are listed on this page.
When to use it
- A header search.
- A help-center lookup.
- A shop keyword field.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Search (AJAX, live results, filters).
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Search — Select Query | The chosen value is read in render() and applied on the front end. |
| Search — Category Filter (Pro) | Switcher inspector control (`select_category`). |
| Search — Enable Ajax Search (live results) | Switcher inspector control (`ajax_search`). |
| Search — Show Password Protected | Only for users with capability to read private posts. |
| Search — Open Link in New Tab | Switcher inspector control (`ajax_search_link_target`). |
| Search — Show Ajax Thumbnails | Switcher inspector control (`show_ajax_thumbnails`). |
| Search — Exclude Results without Thumbnails | Switcher inspector control (`exclude_posts_without_thumbnail`). |
| Search — Show View Results Button | Switcher inspector control (`show_view_result_btn`). |
| Search — View Results | Saved on the widget and consumed in render(). |
| Search — Show Description | Passed through to the post excerpt. |
| Search — Description Number of Words | Numeric value used in this widget’s render/JS (default 30, min 5). |
| Search — No Results Text | Saved on the widget and consumed in render(). |
| Search — Placeholder | Written to the `placeholder` HTML attribute in render(). |
| Search — Aria Label | Written to the `aria-label` HTML attribute in render(). |
| Search — Button | Switcher inspector control (`search_btn`). |
| Search — Style | The chosen value is read in render() and applied on the front end. Options: Inner; Outer. |
| Search — Disable Button Click | Switcher inspector control (`search_btn_disable_click`). |
| Search — Type | The chosen value is read in render() and applied on the front end. Options: Text; Icon. |
| Search — Text | Printed in the widget HTML from render(). |
| Search — Select Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Search — Icon Size (px) | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (default 16, min 0). |
| Input Field (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Input Field (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Input Field (Normal) — Placeholder Color | Writes CSS (king-addons-search-form-input, color) onto the widget’s front-end markup. |
| Input Field (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Input Field (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-search-form-input-wrap`. |
| Input Field (Focus) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Input Field (Focus) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Input Field (Focus) — Placeholder Color | Writes CSS (king-addons-search-form-input, color) onto the widget’s front-end markup. |
| Input Field (Focus) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Input Field (Focus) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}}.king-addons-search-form-input-focus .king-addons-search-form-input-wrap`. |
| Input Field — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-search-form-input, {{WRAPPER}} .king-addons-category-select-wr…`. |
| Input Field — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Input Field — Border Size | Writes CSS `border-width` onto the widget’s front-end markup. |
| Input Field — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Input Field — Padding | Writes CSS (padding, king-addons-category-select-wrap, right) onto the widget’s front-end markup. |
| Taxonomy Filter — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Taxonomy Filter — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Taxonomy Filter — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Taxonomy Filter — Border Size | Writes CSS `border-width` onto the widget’s front-end markup. |
| Taxonomy Filter — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Taxonomy Filter — Select Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 400). |
| Taxonomy Filter — Font Size | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 25). |
| Taxonomy Filter — Font Size (Optgroup Font Size) | Writes CSS `font-size` onto the widget’s front-end markup. (min 0, max 25). |
| Button (Normal) — Text/Icon Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Button (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-search-form-submit`. |
| Button (Hover) — Text/Icon Color | Writes CSS (king-addons-search-form-submit, color, fill) onto the widget’s front-end markup. |
| Button (Hover) — Background Color | Writes CSS (king-addons-search-form-submit, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (king-addons-search-form-submit, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-search-form-submit:hover`. |
| Button — Width | Writes CSS `min-width` onto the widget’s front-end markup. (min 0, max 300). |
| Button — Height | Writes CSS `height` onto the widget’s front-end markup. (min 0, max 100). |
| Button — Gutter | Writes CSS (margin-left, margin-right) onto the widget’s front-end markup. (min 0, max 100). |
| Button — Position | Options: Left; Right. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-search-form-submit`. |
| Button — Border Size | Writes CSS `border-width` onto the widget’s front-end markup. |
| Button — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Ajax (live results) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Ajax (live results) — Background Color (Hover) | Writes CSS (li, background-color) onto the widget’s front-end markup. |
| Ajax (live results) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-data-fetch`. |
| Ajax (live results) — Transition Duration (ms) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 500, min 0). |
| Ajax (live results) — Horizontal Position | Options: Left; Center; Right. |
| Ajax (live results) — Container Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 2000). |
| Ajax (live results) — Max Height | Writes CSS `max-height` onto the widget’s front-end markup. (min 0, max 1000). |
| Ajax (live results) — Top Distance | Writes CSS `margin-top` onto the widget’s front-end markup. (min 0, max 50). |
| Ajax (live results) — Bottom Distance | Writes CSS (li, margin-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Ajax (live results) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Ajax (live results) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Ajax (live results) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-data-fetch a.king-addons-ajax-title`. |
| Ajax (live results) — Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Ajax (live results) — Color (Description Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Ajax (live results) — Typography (Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-data-fetch p a, {{WRAPPER}} .king-addons-search-admin-notice`. |
| Ajax (live results) — Distance (Description Distance) | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Ajax (live results) — Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 300). |
| Ajax (live results) — Distance (Image Distance) | Writes CSS `margin-right` onto the widget’s front-end markup. (min 0, max 50). |
| Ajax (live results) — Color (View Result Text Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Ajax (live results) — Color (Hover) | Writes CSS (king-addons-view-result, color) onto the widget’s front-end markup. |
| Ajax (live results) — Background Color (View Result Text Bg Color) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Ajax (live results) — Background Color (Hover) (View Result Text Bg Color Hr) | Writes CSS (king-addons-view-result, background-color) onto the widget’s front-end markup. |
| Ajax (live results) — Typography (View Result Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} a.king-addons-view-result`. |
| Ajax (live results) — Transition Duration (ms) (View Result Transition Duration) | Writes CSS `transition-duration` onto the widget’s front-end markup. (default 500, min 0). |
| Ajax (live results) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Ajax (live results) — Padding (View Result Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
| Ajax (live results) — Color (Close Btn Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Ajax (live results) — Size | Writes CSS (king-addons-close-search, font-size, height) onto the widget’s front-end markup. (min 0, max 50). |
| Ajax (live results) — Distance (Close Btn Position) | Writes CSS (top, right) onto the widget’s front-end markup. (min 0, max 50). |
| Ajax (live results) — Color (Scrollbar Color) | Writes CSS (ul, border-left-color) onto the widget’s front-end markup. |
| Ajax (live results) — Width (Scrollbar Width) | Writes CSS (ul, border-left-width, width) onto the widget’s front-end markup. (min 0, max 10). |
| Ajax (live results) — Color (No Results Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Ajax (live results) — Typography (No Results Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-data-fetch .king-addons-no-results`. |
| Ajax (live results) — Height | Writes CSS `height` onto the widget’s front-end markup. (min 0, max 1000). |
| Ajax (live results) — Border Size | Writes CSS `border-width` onto the widget’s front-end markup. |
| Ajax (live results) — Border Radius (Search Results Box Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Ajax (live results) — Padding (Search Results Box Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Search (AJAX, live results, filters) options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Search (AJAX, live results, filters) in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Search (AJAX, live results, filters)”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related navigation widgets
Breadcrumbs
A breadcrumb trail for the current page, with separators and styling in Elementor.
Mega Menu
A menu widget that can hold Elementor content in dropdowns — columns, cards, CTAs — not only nested links.
Off-Canvas Content
A panel that slides in from the edge: mobile menu, filters, or extra content you do not want on the canvas.
One Page Navigation
Anchor navigation for a one-page layout. Links scroll to sections; styling is CSS-only.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Search (AJAX, live results, filters) after you activate it.