Hızlı Arama Sonuçları

Bu bölümün görüntülenmesi fastsearchresult.tpl dosyasında yapılandırılabilir. Bu bölümde hızlı arama sonuçları şablonları yapılandırılabilir. Bu şablonda makale açıklamasında olduğu gibi aynı etiketleri kullanabilirsiniz.

Kullanılabilir Etiketler

Hızlı arama sonuçları şablonlarında, makale açıklaması şablonlarında olduğu gibi aynı etiketleri kullanabilirsiniz. Bunlar arasında en yaygın olanlar şunlardır:

{title} - Makale başlığı
{short-story} - Makalenin kısa açıklaması
{date} - Makalenin tarihi
{author} - Makalenin yazarı
{category} - Makalenin kategorisi
{full-link} - Tam makaleye bağlantı
{comments-num} - Yorum sayısı
{views} - Görüntülenme sayısı

Ayrıca, sonuçlarda highlight (vurgulama) için özel bir etiket kullanabilirsiniz:

{fastsearch-highlighter} - Arama terimlerini vurgular

Örnek Kullanım

Temel Hızlı Arama Sonuçları Şablonu

<div class="fastsearch-results">
    <!-- Sonuç bulunamadı durumu -->
    [no-result]
    <div class="no-result">
        <p>Arama sorgunuz için sonuç bulunamadı.</p>
    </div>
    [/no-result]

    <!-- Her sonuç için döngü -->
    [result-entry]
    <div class="fastsearch-item">
        <h3 class="fastsearch-title">
            <a href="{full-link}">{title}</a>
        </h3>
        
        <div class="fastsearch-content">
            {short-story limit="150"}
        </div>
        
        <div class="fastsearch-info">
            <span class="fastsearch-date"><i class="far fa-calendar-alt"></i> {date=d.m.Y}</span>
            <span class="fastsearch-author"><i class="far fa-user"></i> {author}</span>
            <span class="fastsearch-category"><i class="far fa-folder"></i> {category}</span>
            <span class="fastsearch-comments"><i class="far fa-comments"></i> {comments-num}</span>
            <span class="fastsearch-views"><i class="far fa-eye"></i> {views}</span>
        </div>
    </div>
    [/result-entry]

    <!-- Daha fazla sonuç linki -->
    [more-results]
    <div class="fastsearch-more">
        <a href="{more-link}" class="more-link">Tüm sonuçları görüntüle ({total-results})</a>
    </div>
    [/more-results]
</div>

AJAX Hızlı Arama

Hızlı arama genellikle bir arama kutusu üzerinden AJAX ile gerçekleştirilir. Bu sayede kullanıcının sayfayı yenilemesine gerek kalmadan sonuçlar gösterilir. Tipik bir uygulama şöyle olabilir:

Kullanıcı üst menüdeki arama kutusuna bir şeyler yazdığında, belirli bir karakter sayısından sonra (genellikle 3 karakter) AJAX araması tetiklenir
Sonuçlar fastsearchresult.tpl şablonu kullanılarak formatlanır ve bir düşen menü (dropdown) içinde gösterilir
Kullanıcı sonuçlardan birine tıklayabilir veya tam arama sayfasına gitmek için "Tüm sonuçları görüntüle" bağlantısını kullanabilir

Arama Terimlerini Vurgulama

Vurgulamalı Sonuç Örneği

<div class="fastsearch-item">
    <h3 class="fastsearch-title">
        <a href="{full-link}">{fastsearch-highlighter}{title}{/fastsearch-highlighter}</a>
    </h3>
    
    <div class="fastsearch-content">
        {fastsearch-highlighter}{short-story limit="150"}{/fastsearch-highlighter}
    </div>
    
    <div class="fastsearch-info">
        <span class="fastsearch-date"><i class="far fa-calendar-alt"></i> {date=d.m.Y}</span>
        <span class="fastsearch-author"><i class="far fa-user"></i> {author}</span>
    </div>
</div>

CSS Örnekleri

.fastsearch-results {
    max-height: 400px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 100%;
}

.fastsearch-item {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.fastsearch-item:last-child {
    border-bottom: none;
}

.fastsearch-title {
    margin: 0 0 5px 0;
    font-size: 16px;
}

.fastsearch-title a {
    color: #2a2a2a;
    text-decoration: none;
}

.fastsearch-title a:hover {
    color: #0275d8;
}

.fastsearch-content {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.fastsearch-info {
    font-size: 12px;
    color: #888;
}

.fastsearch-info span {
    margin-right: 10px;
}

.fastsearch-info i {
    margin-right: 3px;
}

.fastsearch-more {
    padding: 10px 15px;
    background-color: #f9f9f9;
    text-align: center;
}

.more-link {
    color: #0275d8;
    text-decoration: none;
    font-weight: bold;
}

.no-result {
    padding: 20px;
    text-align: center;
    color: #666;
}

/* Vurgulama stili */
.fastsearch-highlight {
    background-color: #ffffcc;
    font-weight: bold;
    padding: 0 2px;
}