This example demonstrates how the string in the item's text that matches the filter string can be highlighted. A similar functionality is observed in the RadComboBox - ComboBox Filtering Functionality.
JavaScript:
<script>
var $ = $telerik.$;
function highlightDropDownItems(autocompletebox) {
autocompletebox._dropDown._items.forEach(function myfunction(item) {
var regex = new RegExp(autocompletebox.get_text(), 'gi')
var response = item._element.textContent.replace(regex, function (str) {
// modify the enclosing HTML of the text
return "<strong>" + str + "</strong>"
});
$(item._element).html(response);
});
}
// Used when EnableClientFiltering="false"
var original_populateDropDownFunction = Telerik.Web.UI.RadAutoCompleteBox.prototype._populateDropDown;
function new_populateDropDownFunction(data, itemsRendered, renderShowAllButton, dataFields) {
original_populateDropDownFunction.call(this, data, itemsRendered, renderShowAllButton, dataFields);
highlightDropDownItems(this);
}
// Used when EnableClientFiltering="true"
var originalOpenFunction = Telerik.Web.UI.RadAutoCompleteBox.DropDown.prototype.open;
function newOpenFunction(positionInfo) {
originalOpenFunction.call(this, positionInfo);
var autocompletebox = this._dropDown.get_anchor().control;
highlightDropDownItems(autocompletebox);
}
function OnClientLoad(sender, args) {
if (sender.get_enableClientFiltering()) {
Telerik.Web.UI.RadAutoCompleteBox.DropDown.prototype.open = newOpenFunction;
} else {
Telerik.Web.UI.RadAutoCompleteBox.prototype._populateDropDown = new_populateDropDownFunction;
}
}
</script>
Markup:
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
RadAutoCompleteBox2.DataSource = GetDataSource();
RadAutoCompleteBox2.DataBind();
}
private DataTable GetDataSource()
{
DataTable dataTable = new DataTable();
DataColumn column = new DataColumn();
column.DataType = Type.GetType("System.Int32");
column.ColumnName = "OrderID";
dataTable.Columns.Add(column);
column = new DataColumn();
column.DataType = Type.GetType("System.String");
column.ColumnName = "ShipName";
dataTable.Columns.Add(column);
DataColumn[] PrimaryKeyColumns = new DataColumn[1];
PrimaryKeyColumns[0] = dataTable.Columns["OrderID"];
dataTable.PrimaryKey = PrimaryKeyColumns;
for (int i = 0; i <= 80; i++)
{
DataRow row = dataTable.NewRow();
row["OrderID"] = i + 1;
row["ShipName"] = (i + 1) + " ShipName";
dataTable.Rows.Add(row);
}
return dataTable;
}