Как сделать поле автокомплит с яндекс карты api?

Question

[nickname13384]

Делаю яндекс карту с отдельным input для поиска улиц (карта и инпут отдельно).
Для реакт использую это.
Не понимаю, как подключить яндекс апи к инпуту для автокомплита.
Для подсказок есть SuggestView, как его для реакт как подключать?

Answer 1

[Andrew Ghostuhin]

nickname13384

import React, { useState, useRef } from 'react'
import { withYMaps } from 'react-yandex-maps'
import { Column, Layout } from '@ui/layout'
import { ContentLight } from '@ui/dropdown'
import { Input } from '@ui/input'
import styled from '@emotion/styled'
import OnOutsideClick from '@ui/layer/src/OnOutsideClick'
import Dropdown from './Dropdown'
import SuggestView from './SuggestView'
import { update, change, select } from './handlers'
import { SuggestProps } from './types'

const Wrapper = styled('div')({
  position: 'relative',
  width: '100%',
})

const Suggest = ({
  color,
  disabled,
  id,
  readOnly,
  placeholder,
  value,
  ymaps,
  onChange,
  onSuggest,
}: SuggestProps) => {
  const [items, setItems] = useState([])
  const [toggle, setToggle] = useState(false)
  const suggestRef = useRef()
  const onUpdate = update(ymaps, setItems)
  const content = []
  content.push(
    <Input
      id={id}
      key='smart-input'
      disabled={disabled}
      value={value}
      onChange={
        disabled ? null : targetValue => change(targetValue, onUpdate, onChange)
      }
      color={color}
      readOnly={readOnly}
      placeholder={placeholder}
      onClick={() => setToggle(true)}
    />,
  )

  if (
    toggle &&
    items.length > 0 &&
    !(items[0] !== value && items.length === 1)
  ) {
    content.push(
      <OnOutsideClick
        key='smart-suggest'
        target={suggestRef.current}
        onOutsideClick={() => setToggle(false)}
      >
        <Dropdown>
          <ContentLight borderRadius='s' width='large' noPopup>
            <Column>
              <Layout basis='12px' />
              {items.map(s => (
                <SuggestView
                  key={Math.random()}
                  onClick={() =>
                    select(s.value, onSuggest, onUpdate, onChange, setToggle)
                  }
                >
                  {s.displayName}
                </SuggestView>
              ))}
              <Layout basis='12px' />
            </Column>
          </ContentLight>
        </Dropdown>
      </OnOutsideClick>,
    )
  }

  return <Wrapper ref={suggestRef}>{content}</Wrapper>
}

Comments

[nickname13384]

Этот код использует javascript api?

[Andrew Ghostuhin]

Это TypeScript. Но смысл тот же. И это работает у меня на проде.

[nickname13384]

Andrew Ghostuhin, я использую react-yandex-maps, если использовать javascript api придется много переписывать. Я тоже пишу на ts

[Andrew Ghostuhin]

nickname13384, этот код написан с использованием react-yandex-maps. Вопрос про написание на javascript api некорректен в данном случае

[nickname13384]

Andrew Ghostuhin, ну я же не вижу что в импортах подключено. Это откуда "ymaps" ?

[Andrew Ghostuhin]

nickname13384, обновил код

[nickname13384]

Andrew Ghostuhin, withYMaps не используется а откуда тогда ymaps? или это оно и есть?

[Andrew Ghostuhin]

nickname13384, он и есть, да ты бы код запустил, чего гадать-то?

[nickname13384]

Andrew Ghostuhin, будет затруднительно это все запускать, получается что ymaps это window.ymaps? подключен через

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<MY_API_CODE>&apm;lang=ru_RU" type="text/javascript"></script>

[Andrew Ghostuhin]

Слушай, я тебе скинул логику компонента, тебе надо просто сделать то же самое у себя.

[Andrew Ghostuhin]

nickname13384, если у тебя ТС и react-yandex-maps, что там такого может быть затруднительного?

[nickname13384]

Andrew Ghostuhin, можно посмотреть на функции import { update, change, select } from './handlers'

[Andrew Ghostuhin]

import { Change, Select, Update } from './types'

export const update: Update = (ymaps, setItems) => async value => {
  const options = {
    results: 6,
  }

  if (!ymaps.suggest) {
    return false
  }

  const items = await ymaps.suggest(value, options)
  setItems(items)

  return true
}

export const change: Change = (value, onUpdate, onChange) => {
  onUpdate(value)
  onChange(value)
}

export const select: Select = (
  value,
  onSuggest,
  onUpdate,
  onChange,
  setToggle,
) => {
  onUpdate(value)
  onSuggest(value)
  onChange(value)
  setToggle(false)
}

[Andrew Ghostuhin]

nickname13384 может уже отметишь решением да я пойду?)

[nickname13384]

Andrew Ghostuhin, последний вопрос, <Suggest ymaps={????} /> ? что в пропсы кидать

[nickname13384]

Andrew Ghostuhin, скажи что в ymaps={????} и отмечу решением

[Andrew Ghostuhin]

import { ReactNode } from 'react'
import { YMaps } from 'react-yandex-maps'

type OnChange = (value: string) => void

export interface SuggestViewProps {
  children?: ReactNode
  onClick?: () => void
}

export interface SuggestProps {
  color?: string
  disabled?: boolean
  id?: string
  readOnly?: boolean
  placeholder?: string
  value?: string
  ymaps?: typeof YMaps
  onChange?: OnChange
  onSuggest?: OnChange
}

type OnUpdateCallback = (value: string) => Promise<boolean>

export type Update = (
  ymaps: typeof YMaps,
  setItems: (items: any[]) => void,
) => OnUpdateCallback

export type Change = (
  value: string,
  onUpdate: OnUpdateCallback,
  onChange: OnChange,
) => void

export type Select = (
  value: string,
  onSuggest: OnChange,
  onUpdate: OnUpdateCallback,
  onChange: OnChange,
  setToggle: (toggle: boolean) => void,
) => void

[Andrew Ghostuhin]

nickname13384 ∆ ещё остались вопросы?

[nickname13384]

Andrew Ghostuhin, больше вопросов нет, спасибо большое

Answer 2

[mt. NATS]

javascript autocomplete react

Comments

[nickname13384]

Я автокомплит и сам напишу, как яндекс карты к нему подключить?

[mt. NATS]

а так?

[nickname13384]

mt. NATS, если бы я ответ нагуглил, сюда бы не писал. Да и по запросу никаких совпадений