Хочу поиск как у MDN

[nin-jin]

Отлично, давайте сделаем то же самое на $mol..

Сперва, нам потребуется тип для модельки страницы:

// DTO информации о странице
export type $my_search_page = {
	title: string,
	path: string,
}

Теперь опишем кастомное поле поиска страниц:

$my_search $mol_search
	- \Наследуемся от обычного поискового поля с подсказками
	pages /$my_search_page
		- \Данные всех страниц
	Suggest_link!id $mol_link
		- \Вьюшка пункта подсказки будет ссылкой
		uri <= suggest_uri!id \
		sub /
			<= Suggest_info!id $mol_list
				- \Вертикальный лейаут с виртуализацией
				rows /
					<= Suggest_title!id $mol_dimmer
						- \Подсветка поискового запроса в заголовке
						haystack <= suggest_title!id \
						needle <= query
					<= Suggest_path!id $mol_dimmer
						- \Подсветка поискового запроса в пути
						haystack <= suggest_path!id \
						needle <= query

Добавляем немного логики:

// Расширяем декларативное описание компонента
export class $my_search extends $.$my_search {
	
	// Словарик для быстрого поиска страницы по пути
	@ $mol_mem
	dictionary() {
		const pages = this.pages()
		const dict = new Map
		for( const page of pages ) dict.set( page.path, page )
		return dict
	}
	
	// Список путей, соответствующих поисковому запросу
	@ $mol_mem
	suggests() {
		return this.pages()
			.filter( $mol_match_text( this.query(), page => [ page.path, page.title ] ) )
			.slice( 0, 100 )
			.map( page => page.path )
	}
	
	// Выпадающее меню из наших вьюшек
	menu_items() {
		return this.suggests().map( ( path : string ) => this.Suggest_link( path ) )
	}
	
	// Название страницы
	suggest_title( path: string ) {
		return this.dictionary().get( path ).title
	}
	
	// Отображаемый путь к странице
	suggest_path( path: string ) {
		return path
	}
	
	// Путь для перехода
	suggest_uri( path: string ) {
		return 'https://developer.mozilla.org' + path
	}
	
}

Добавляем немного красоты:

$mol_style_define( $my_search, {
	
	// Название страниц чуть жирнее
	Suggest_title: {
		textShadow: '0 0',
	},
	
	// Пути красим обычным цветом текста
	Suggest_path: {
		color: $mol_theme.text,
	},
	
} )

Поле поиска готова. Давайте теперь воспользуемся им. Создадим демку:

$my_search_demo $mol_view
	title \Демка поиска
	pages_uri \https://developer.mozilla.org/ru/search-index.json
		- \Откуда качать данные
	sub /
		<= Row $mol_row
			sub /
				<= Search $my_search
					- \Используем наше поисковое поле
					pages <= pages /$my_search_page

Опишем типизированный валидатор ответа от сервера.

// Схема ответа сервера
const Response = $mol_data_array(
	$mol_data_record({
		path: $mol_data_string,
		title: $mol_data_string,
	})
)

Загрузим данные с сервера и провалидируем их:

// Логика для демки поиска
export class $my_search_demo extends $.$my_search_demo {
	
  @ $mol_mem
	pages() {
    // Грузим и валидируем JSON получая на выходе корректный тип
		return Response( $mol_fetch.json( this.pages_uri() ) )
	}
  
}

Вуаля:

[karrakoliko]

давайте сделаем то же самое [поисковое поле с подсказками как у MDN] на $mol

давайте

1. Наследуемся от обычного поискового поля с подсказками
2. [делаем чтобы как у MDN]

читер!

[nin-jin]

Да, на $mol не обязательно изобретать велосипеды с нуля, ибо всегда можно взять похожий компонент и допилить его под свои нужны.

[demimurych]

это все прекрасно, только бесполезно чуть более чем полностью, по той простой причине, что адекватность запросу, выдаваемой информации, стремиться к нулю. Как следствие все равно пользуешься поиском от корпорации бобра.

интересно, когда на mdn найдут ресурс починить сломаные к чертям локализации переводов?

или вернут виджет выбора языка на свое место. А то люди уже устали придумывать версии, накой черт его перенесли вниз страницы