雷の高速検索ウィジェットAfstoインスタント検索

それはあなたのウェブサイト上で高速検索機能を持つことが不可欠です.あなたの検索が遅いならば、これはあなたのUXに悪影響を及ぼします、しかし、Googleもこの貧しいパフォーマンスのためにあなたのウェブサイトを罰します.しかし、ほとんどの解決策は、高値や実装するのは難しいです.あなたは自分でそれを構築することを選択するかもしれませんが、それは右にそれを得るために長い時間がかかり、あなたはまだそれのための良いUIが必要です.だからこそ、我々はAostoインスタント検索ウィジェットを作ったので、する必要はありません.

どうやって働くの？

ウィジェットは、インデックスとフィルタを使用するための設定が含まれてafostoインスタント検索エンジンに接続することができます.すべてがafostoプラットフォームで設定可能です.この方法では、開発者はコードを実装するだけで、表示される方法を変更できます.
あなたは'タイプとして'検索を使用したり、'を入力してキーを押して使用して検索を使用するように選択することができます.として';を入力すると、ユーザーが入力したクエリの結果のインスタントフィードバックを取得します.次のセクションまたは我々の上でcodepenでそれをためしてくださいwebsite .

どのように、私は私のサイトにこれを実行しますか？

まず、1つ以上のインデックスを持つ検索エンジンを作成する必要があります.あなたは私たちのプラットフォームにサインアップすることによってそれを行うことができますafosto.com そして、我々のガイドに続いてくださいdocumentation .
設定された検索エンジンを使用すると、サイト上でコードを実装することができます.プロジェクトによっては、スクリプトにスクリプトを含める方法についていくつかのオプションがあります.あなたは糸やNPM、またはCDNからスクリプトタグを介してそれをインストールすることができます.この記事のために、我々はそれを簡単にして、CDNセットアップを使用します.以下のスクリプトをあなたのサイトコードに含めます.

<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.css" />

<!-- Scripts -->
<script defer src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.js"></script>

これは、ウィジェットを初期化してレンダリングするためのスタイルと必要なスクリプトが含まれます.実際に初期化するには、初期化メソッドでスクリプトタグを追加できますAfostoInstantSearchWidget.init() . このメソッドは、検索エンジンキーを受け取り、検索エンジンインデックスの設定を取得します.

<script>
  document.addEventListener('DOMContentLoaded', function() {
   AfostoInstantSearchWidget.init('movies-demo');
  });
</script>

今、ウィジェットは行く準備ができており、それを開くために待っている.データ属性を追加するにはdata-af-instant-search ボタンを入力したり、トリガとして使用するものを選択します.

<button data-af-instant-search>Search</button>

それはすべてそこにある!あなたは、例として下記のCodepenを使用することができます我々のインスタント検索の速度を参照してください.

涼しいですが、デザインをカスタマイズしたいです。

CSSを使用してウィジェットのスタイルやレイアウトをカスタマイズできます.色については、CSSのカスタムプロパティを使用します.たとえば、デフォルトの青であるプライマリカラーを変更するには、--af-is-primary-500 好きな色に.以下の例では、灰色の値を反転させたので、ダークモードのように見えます.レイアウトも少し変えました.レイアウト用のCSSグリッドを使用しているので、コンポーネントを並べ替えることができます.下の例には、完全な高さのサイドバーがあり、ページコンポーネントごとにページ化と項目が結果を超えています.
これは単にカスタマイズできる例です.クラスまたは他のセレクタを使用すると、必要なすべてをカスタマイズし、独自のテーマを作成できます.

私は高速検索が欲しいが、私自身の

検索の速度のように、あなた自身の実装をしたいですか?私たちはあなたをカバーした!内部では、ウィジェットはInstant Search Client すべてのリクエストと機能を処理する.このクライアントを使用すると、独自のソリューションを構築したり、例えばinstantsearch.js or react-instantsearch-dom . これらのパッケージを使用すると、Afstoインスタント検索に接続されている独自のUIを作成することができます.この動画を見るdemo 我々のウェブサイトで、または、下記のCodepenを例として使ってください.

あなたが何を思うかを知ってみよう

私たちはあなたが私たちの検索ウィジェットのことを知りたいです.コメントを残したり、私たちのチェックアウト無料GitHub 詳細については、または問題を報告する.畝
チェックアウトwebsite to register your Afosto account 他のアプリを見てください.好きにQuicq , 我々のオンザフライ画像最適化プラットフォーム.