Alpine.js ile Algolia Search örneği

Raymond Camden

Okurlarımın bildiği gibi, aşık oldum Alpine.js Son zamanlarda ve her zaman çerçeveyi kullanmanın daha fazla yolunun peşindeyim. Algolia’s ile nasıl kullanabileceğinize dair bir örnek paylaşacağımı düşündüm. JavaScript istemcisi. bunu üzerimde kullanıyorum arama sayfası Burada Vue.js ile, bu nedenle Alpine.js’de benzer bir arayüzü yeniden oluşturmak çok zor bir şey değildi. İşte nasıl yaptım.

Tasarım

Düzen için basit bir arama arayüzü ve her sonuç için başlığı, tarihi ve bir pasajı görüntüleyen sonuçlarla gittim. İşte baştan sona Alpine.js yönergelerini içeren HTML:

<div x-data="app" x-cloak>
    <input type="search" x-model="term">
    <button @click="search" :disabled="!searchReady">Search</button>
    <div x-show="noResults">
        <p>
            Sorry, but there were no results.
        </p>
    </div>
    <div x-show="results">
        <h2>Results</h2>
        <p>
            There were <span x-text="totalHits"></span> total matches. Returning the first <span x-text="resultsPerPage"></span> results:
        </p>
        <template x-for="result in results">
            <div>
                <p>
                <a :href="result.url"><span x-text="result.title"></span></a> (posted <span x-text="result.date"></span>)
                </p>
                <p class="snippet" x-html="result.snippet"></p>
            </div>
        </template>
    </div>
</div>

Yukarıdan, ilk iki öğe benim arama alanımdır. x-modelve aramayı başlatacak bir düğme. Bir değere göre devre dışı bıraktım searchReady ki yakında göreceksiniz.

Sonraki blok, hiçbir sonucun bulunmadığı durumları ele alır.

Ve sonra sonuçlar hazır olduğunda ortaya çıkan bir bloğum var. Toplam isabet sayısını ve kaç tane gösterdiğimi gösteriyorum. (Burada sayfalama yapabilirim ve insanlar bunu görmek isterse sormanız yeterli.) Daha sonra url, başlık, tarih ve snippet değerlerini kullanarak sonuçlarım üzerinde dolaşırım.

JavaScript

Şimdi JavaScript koduna bakalım:

const appId = 'WFABFE7Z9Q';
const apiKey = 'd1c88c3f98648a69f11cdd9d5a87de08';
const indexName="raymondcamden";

document.addEventListener('alpine:init', () => {
  Alpine.data('app', () => ({
        init() {
            let client = algoliasearch(appId, apiKey);
            this.index = client.initIndex(indexName);
            this.searchReady = true;
        },
        index:null,
        term:'',
        searchReady:false,
        noResults:false,
        results:null,
        totalHits:null,
        resultsPerPage:null,
        async search() {
            if(this.term === '') return;
            this.noResults = false;
            console.log(`search for ${this.term}`);
            
//          let rawResults = await this.index.search(this.term);
            let rawResults = await this.index.search(this.term, { 
                attributesToSnippet: ['content']
            });         

            if(rawResults.nbHits === 0) {
                this.noResults = true;
                return;
            }
            this.totalHits = rawResults.nbHits;
            this.resultsPerPage = rawResults.hitsPerPage;
            this.results = rawResults.hits.map(h => {
                h.snippet = h._snippetResult.content.value;
                h.date = new Intl.DateTimeFormat('en-us').format(new Date(h.date));
                return h;
            });
        }
  }))
});

Üstte, Algolia ile ilgili üç sabitim var. Bir uygulama kimliği, yalnızca okuma erişimine sahip olan API belirtecim ve dizinimin adı. Alpine uygulamayı başlattığında, Algolia dizin sarmalayıcısının bir örneğini oluşturuyorum ve ardından searchReady boolean’dan true’ya. Bu, HTML’deki bu düğmeyi etkinleştirecektir.

Arama için değerin hızlı bir doğrulamasını yapıyorum ve ardından onu Algolia’ya iletiyorum. Yorumlanan satır, varsayılanları istiyorsanız bunun ne kadar basit olabileceğini gösterir, ancak Algolia’nın içerik alanında bir snippet oluşturmasını istedim, böylece arama sonuçları biraz daha iyi olurdu.

Son olarak, sonuçlar üzerinde biraz çalışıyorum. Hiçbiri bulunamazsa, değeri HTML’de işaretlenecek şekilde ayarladım. Sonuç alırsak, toplam isabet ve sayfa başına değerleri kopyalarım. Daha sonra HTML’de işleri biraz daha kolaylaştırmak için sonuçları eşleştiririm. Spesifik olarak, pasajı kullanımı daha kolay bir anahtara kopyalarım ve ardından Intl tarihleri ​​biraz daha güzel hale getirmek için nesne.

İşte nasıl göründüğüne dair bir örnek ve lütfen tasarımda elimden gelenin en iyisini yaptığımı unutmayın. Alpine veya Algolia’yı suçlamayın. 😉

Bunu kendiniz denemek isterseniz, aşağıdaki CodePen ile oynayın ve her zaman olduğu gibi, herhangi bir sorunuz olursa bana bildirin!

Kalemi Gör Algolia + Alp örneği tarafından Raymond Camden (@cfjedimaster) üzerinde kod kalemi.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.