---
title: Setting up predictive search using local indexes
related:
  - https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/creating-local-search-indexes.md
  - https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/building-a-search-interface-for-local-indexes.md
  - https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/displaying-local-index-search-results-using-transformations.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Predictive search displays results immediately while users type search expressions. Seeing the results before submitting the search allows users to:

- Find out if the entered keywords are relevant
- Quickly navigate to results without going through a dedicated search page

The predictive search functionality is implemented into the **Smart search box** [web part](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/building-a-search-interface-for-local-indexes.md). When a user stops typing in the search box for 0.5 seconds, the web part runs a search request for the current text. The predictive search finds results using a set of assigned [search indexes](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/creating-local-search-indexes.md). A list of the top results appears directly below the search box. Users can open links to the relevant pages by selecting individual results of the predictive search.

> **Note:** **Important**: The predictive search functionality described on this page is only available for [locally stored indexes](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes.md). For [Azure Search indexes](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-azure-search.md), you can provide similar functionality by [setting up the suggestions feature](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-azure-search/customizing-azure-search/implementing-suggestions-for-azure-search.md).

## Enabling predictive search

To turn on predictive search for a Smart search box:

1. Open the **Pages** application.
2. Edit the page containing your Smart search box on the **Design** tab.
3. **Configure** the **Smart search box** web part (double-click).
4. Check the **Enable predictive search** property.
5. Assign one or more search indexes through the **Indexes** property (in the _Predictive settings_ category).

   > **Note:** **Note**
   >
   > The predictive search can use different indexes than the standard search. The functionality of the main search is always determined by the indexes assigned to the _Smart search results_ web part on the target search results page.
   >
   > You need to rebuild all [search indexes](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/creating-local-search-indexes.md) that you plan to use for the predictive search after upgrading to Kentico version 8.
6. Click **OK**.

The search box now displays predictive results when users type search expressions. You can [customize](#customizing-the-predictive-search) the appearance or behavior of the predictive search.

![Enabling predictive search for the Smart search box](https://docs.kentico.com/docsassets/k11/setting-up-predictive-search-using-local-indexes/Enabling_Predictive_Search.png "Enabling predictive search for the Smart search box")

## Using the predictive search

When entering text into a search box with predictive search enabled, the results appear shortly after you stop typing. By default, the predictive search separates results into groups. The groups represent the indexes where the search found matching results.

You can navigate directly to the pages linked by individual results of the predictive search:

- Click the results in the list

  OR
- Move between results using the up/down arrow keys, and link to the selected item by pressing Enter

Alternatively, you can submit the search request and view the results page like with a standard search box.

![Search box displaying the default predictive search results](https://docs.kentico.com/docsassets/k11/setting-up-predictive-search-using-local-indexes/image-01.png "Search box displaying the default predictive search results")

## Customizing the predictive search

To adjust the basic behavior of the predictive search, configure the properties of the **Smart search box** web part:

- **Min. characters** (_Predictive settings_ category) - sets the minimum number of characters that users need to type into the search box to trigger the predictive search.
- **Max. results** (_Predictive settings_ category) - sets the maximum number of search results that the predictive search displays.
- **Enable arrow key selection** (_Predictive results_ category) - if enabled, users can move between the predictive search results using the up and down arrow keys, and link to the selected result by pressing Enter.

Additionally, you can configure the predictive search just like standard [smart search web parts](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/building-a-search-interface-for-local-indexes.md):

- Set the [Search mode](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/configuring-search-assistance-features-for-local-indexes.md)
- Add conditions to the search (**Search condition**)
- Determine the order of the results (**Search sort**)
- Set page filtering options

#### Predictive result groups

Groups help organize the search results if the predictive search uses multiple indexes. The default groups separate the results into sections with captions that match the **Display name** of the related search index.

To disable the default grouping, uncheck the **Group results by index** property of the _Smart search box_ web part (in the _Predictive results_ category). It is recommended to disable grouping if your predictive search only uses one search index.

#### Result content and appearance

Modify the design of the predictive search results through the properties in the _Predictive results_ category of the _Smart search box_ web part.

The content of individual results is determined by the [transformation](https://docs.kentico.com/k11/configuring-kentico/setting-up-search-on-your-website/using-locally-stored-search-indexes/displaying-local-index-search-results-using-transformations.md) assigned in the **Search result transformation** property. To allow users to open links for selected search results, include one **** element with a properly defined **href** attribute in the transformation code. The URL automatically opens when users select one of the predictive search results using the up/down arrow keys and press Enter.

You can change the following special result items by entering custom HTML content:

- **More results content** - placed after the last search result if the maximum number of predictive results is reached. Use the **{0}** formatting expression to get the URL of the full search result page assigned to the search box.
- **No results content** - displayed when the predictive search does not find any results.

> **Info:** To define CSS styles for the predictive search, edit the website's main [CSS stylesheet](https://docs.kentico.com/k11/developing-websites/designing-websites-using-css.md).
>
> The **Smart search box** web part has a default styling that you may want to remove. You can do that in **Web parts** (application) **-> Smart search box -> CSS**.
>
> To change the names of the default CSS classes applied to the results, set the following properties of the _Smart search box_ web part (in the _Predictive results_ category):
>
> - **Predictive results CSS class** - specifies the name of the CSS class assigned to the block element that contains the predictive search results.
> - **Selected result CSS class** - specifies the name of the CSS class applied to the element containing the selected predictive search result.

#### Tracking predictive search requests

You can enable or disable tracking for the predictive search through the properties in the _Predictive tracking_ category of the _Smart search box_ web part:

- **Log internal search activity** - if enabled, the system logs every predictive search request as an **Internal search** [on-line marketing activity](https://docs.kentico.com/k11/on-line-marketing-features/managing-your-on-line-marketing-features/contact-management/tracking-contact-activities.md).
- **Track web analytics search keywords** - if enabled, the site's [web analytics](https://docs.kentico.com/k11/on-line-marketing-features/managing-your-on-line-marketing-features/web-analytics.md) log all text submitted to the predictive search as part of the **On-site search keywords** statistic.

> **Note:** **Note**: Tracking of predictive search requests may generate a large volume of irrelevant data (activities, keywords). The frequency of the search requests depends on the typing patterns of your website's visitors. Keywords often include incomplete words or fragments.

### Example - Customizing the design of predictive search results

The following example shows how to change the appearance of highlighted results in the predictive search on the sample Corporate site. The customization also inserts the name of the related search index directly into individual result items (instead of using categories).

#### Configuring the Smart search box web part

1. Open the **Pages** application for the sample Corporate site.
2. Select the website root page in the content tree (Corporate Site).
3. Open the **Design** tab and double-click the **Smart search box** web part.
4. Check the **Enable predictive search** property.
5. **Select** one or more **Indexes** (in the _Predictive settings_ category).
6. Uncheck **Group results by index** (in the _Predictive results_ category).
7. Click **New** next to the **Search result transformation** property (in the _Predictive results_ category). Create the following ASCX transformation:

   ```html

   <div class="customPredictiveResultItem">
       <a href='<%# SearchResultUrl() %>'>
           <%# HTMLHelper.HTMLEncode(DataHelper.GetNotEmpty(Eval("Title"), "/")) %>   
       </a>
       <span style="font-size: 7pt">
           <%# CMS.Search.SearchIndexInfoProvider.GetSearchIndexInfo(Eval<string>("index")).IndexDisplayName %>
       </span>
   </div>

   ```
8. Click **Save** and close the dialog.
9. **Save & Close**.

#### Modifying the Smart search box CSS styles

1. Open the **Web parts** application.
2. Select the **Smart search box** web part in the tree (_Full-text search -> Smart search_).
3. Open the **CSS** tab.
4. Comment out the following default CSS classes:

   ```css

   /*
   .predictiveSearchResults .selectedResult {
     text-decoration: underline;
   }

   .predictiveSearchResults a {
     text-decoration: none;
   }
   */

   ```
5. Add the following CSS class definitions:\
   **Note** that styles are added directly in the web part for the purpose of this example. The recommended approach for styling web parts is using [site stylesheets](https://docs.kentico.com/k11/developing-websites/designing-websites-using-css.md).

   ```css

   .customPredictiveResultItem {
     line-height: 160%;
     margin: 2px;
   }

   .customPredictiveResultItem a {
     display: block;
     color: black;
     text-decoration: none;
   }

   .customPredictiveResultItem.selectedResult {
     color: white;
     background-color: #326CA6;
   }

   .customPredictiveResultItem.selectedResult a {
     color: white;
     text-decoration: none;
   }

   ```
6. Click **Save**.

#### Result

If you now try searching using the box in the header of the Corporate site, the results found in the assigned search indexes appear while typing.

- Each result shows the name of the related search index.
- Selected predictive results are highlighted using a colored background instead of the original underline effect.

![Customized predictive search results](https://docs.kentico.com/docsassets/k11/setting-up-predictive-search-using-local-indexes/image-02.png "Customized predictive search results")