Antrium A35D

Bir sonraki için en iyisini yap...

Jquery Autocomplete Tam Örnek

Whatsapp ile paylaş

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Model Autocomplete Örneği</title>
    <!-- jQuery UI CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <style>
        /* Opsiyonel: loading göstergesi için stil */
        #loading {
            display: none;
            color: #007bff;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="col-md-3">
        <label for="modelInput">Model</label>
        <input id="modelInput" class="form-control" type="text" placeholder="Model arayın...">
        <!-- Seçilen modelin ID'sini tutacak gizli alan -->
        <input type="hidden" id="ModelID" name="ModelID">
        <!-- AJAX isteği sırasında görüntülenecek loading göstergesi -->
        <div id="loading">Yükleniyor...</div>
    </div>
    
    <div class="col-md-3">
        <label for="DrpMARKA">Marka</label>
        <select id="DrpMARKA" class="form-control">
            <option value="0">Marka Seçiniz</option>
            <option value="1">Marka 1</option>
            <option value="2">Marka 2</option>
        </select>
    </div>

    <!-- jQuery ve jQuery UI kütüphaneleri -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <script>
    $(function() {
        $("#modelInput").autocomplete({
            delay: 500, // 500 ms gecikme: yazmayı bitirdikten sonra arama başlar.
            source: function(request, response) {
                $.ajax({
                    url: "/modelLIST_auto", // Güncellenmiş URL
                    dataType: "json",
                    data: {
                        term: request.term,
                        markaID: $("#DrpMARKA").val()
                    },
                    beforeSend: function() {
                        // AJAX isteği başlamadan önce loading göstergesini göster
                        $("#loading").show();
                    },
                    success: function(data) {
                        // İşlem tamamlandığında loading göstergesini gizle
                        $("#loading").hide();
                        // Dönen verinin formatı şu şekilde olmalıdır:
                        // [ { "label": "Model Adı", "value": ModelID }, ... ]
                        response(data);
                    },
                    error: function(xhr, status, error) {
                        $("#loading").hide();
                        console.error("Autocomplete hatası:", error);
                    }
                });
            },
            minLength: 2, // Arama için minimum karakter sayısı
            select: function(event, ui) {
                // Kullanıcı bir öğe seçtiğinde:
                // 1. Input alanında model adını göster.
                $("#modelInput").val(ui.item.label);
                // 2. Gizli alana modelin ID'sini set et.
                $("#ModelID").val(ui.item.value);
                // Otomatik tamamlama varsayılan davranışını engelle.
                return false;
            },
            focus: function(event, ui) {
                // Liste üzerinde gezinirken input alanında model adını göster.
                $("#modelInput").val(ui.item.label);
                return false;
            }
        });
    });
    </script>
</body>
</html>
-------------------------------------

 

using Microsoft.AspNetCore.Mvc;
using System.Linq;

namespace YourNamespace.Controllers
{
    // ApiController kullanımı, model doğrulama ve otomatik JSON dönüşümü sağlar.
    [ApiController]
    [Route("[controller]")] // Bu örnekte, URL: /modelLIST_auto şeklinde erişim için Controller adını kullanıyoruz.
    public class ModelLIST_autoController : ControllerBase
    {
        private readonly ApplicationDbContext _context;

        public ModelLIST_autoController(ApplicationDbContext context)
        {
            _context = context;
        }

        // GET: /modelLIST_auto?term=arananMetin&markaID=1
        [HttpGet]
        public IActionResult Get([FromQuery] string term, [FromQuery] int markaID)
        {
            // Veritabanındaki modelleri, girilen terimi içeren ve markaID'ye eşit olan kayıtları filtreliyoruz.
            var models = _context.Models
                .Where(m => m.Name.Contains(term) && m.MarkaId == markaID)
                .Select(m => new 
                {
                    label = m.Name, // Autocomplete'de gösterilecek metin
                    value = m.Id    // Seçim yapıldığında kullanılacak ID değeri
                })
                .ToList();

            return Ok(models);
        }
    }
}
 

26 Okunma | 10.02.2025 00:32
Autocomplete jquery

YORUMLAR

Yorum Yaz
Hüseyin ÖZKAN Yazılım Uzmanı

C#,MVC,MSSQL,Windows Forms

Kategoriler
Son Eklenenler
En Çok Okunanlar