---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/custom_search_results.md
- https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/custom_search_results.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt
# Custom display for search results
Open in CodeSandbox
This example shows how to set a custom view for search results.
The selected results are added to the GeoObjectCollection collection, where the "click" event is listened for. When a found object
is clicked, its placemark turns red.
In the same way, the collection's objects have a custom layout set for the popup hint.
{% list tabs %}
- index.html
```html
Examples. Setting a custom display for search results
```
- custom_search_results.js
```js
ymaps.ready(function () {
var myMap = new ymaps.Map("map", {
center: [59.22, 39.89],
zoom: 12,
controls: [],
}),
// Creating an instance of the ymaps.control.SearchControl class.
mySearchControl = new ymaps.control.SearchControl({
options: {
noPlacemark: true,
},
}),
// The search results will be placed in the collection.
mySearchResults = new ymaps.GeoObjectCollection(null, {
hintContentLayout:
ymaps.templateLayoutFactory.createClass(
"$[properties.name]"
),
});
myMap.controls.add(mySearchControl);
myMap.geoObjects.add(mySearchResults);
// When the found object is clicked, the placemark turns red.
mySearchResults.events.add("click", function (e) {
e.get("target").options.set("preset", "islands#redIcon");
});
// Putting the selected result in the collection.
mySearchControl.events
.add("resultselect", function (e) {
var index = e.get("index");
mySearchControl.getResult(index).then(function (res) {
mySearchResults.add(res);
});
})
.add("submit", function () {
mySearchResults.removeAll();
});
});
```
{% endlist %}