New to Kendo UI for jQuery? Start a free 30-day trial

PrefixOptions

configuration

The configuration for the prefix adornment of the component.

prefixOptions

Object

<input id="autocomplete" />
<script>
  $("#autocomplete").kendoAutoComplete({
    dataSource: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" }
      ],
    dataTextField: "name",
    prefixOptions: {
      template: () => `${kendo.ui.icon("search")}`
    }
  });
</script>

prefixOptions.icon

String

Defines the name for an existing icon in a Kendo UI theme or SVG content.

<input id="autocomplete" />
<script>
  $("#autocomplete").kendoAutoComplete({
    dataSource: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" }
      ],
    dataTextField: "name",
    prefixOptions: {
      icon: "search"
    }
  })
</script>

prefixOptions.separator

Boolean

If set to false, the prefix adornment will not have a separator.

Default: true

<input id="autocomplete" />
<script>
  $("#autocomplete").kendoAutoComplete({
    dataSource: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" }
      ],
    dataTextField: "name",
    prefixOptions: {
      template: () => `${kendo.ui.icon("search")}`,
      separator: false
    }
  })
</script>

prefixOptions.template

String|Function

The template for the prefix adornment of the component.

<input id="autocomplete" />
<script>
  $("#autocomplete").kendoAutoComplete({
    dataSource: [
        { id: 1, name: "Apples" },
        { id: 2, name: "Oranges" }
      ],
    dataTextField: "name",
    prefixOptions: {
      template: () => `${kendo.ui.icon("search")}`
    }
  })
</script>