Ajax auto-suggest / auto-complete

Kullanıcılarımız sitemizde veritabanında yer alan verileri aramaları için yer alan arama bölümlerimizi daha etkin ve pratik bir uygulama haline getirebiliriz.

Kullanıcımız input’a her karekter girdiginde sorgulama yapıyoruz ve girilen karektere uygun verileri input’un altına seçilebilir bir şelikde getiriyoruz. Bu işlem için Ajax auto-suggest / auto-complete uygulaması kullanıyoruz. Örneğimizde verilerimizi text.php dosyamız içerisindeki aUsers dizimiz içerisinde sorgulayarak çekiyoruz.

index.html kodlarımız

<html>
<head>
<title>Ajax auto-suggest / auto-complete | Gumusluoglu.Com</title>
<script type="text/javascript" src="js/bsn.AutoSuggest_2.1.3.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="wrapper">
        <div id="content">
        <h1>Gumusluoglu.Com Autosuggest / Autocomplete</small></h1>
        <h3>Example (JSON)</h3>
            <div>
            <form method="get" action="" class="asholder">
  
                <label for="testinput">Person</label>
                <input style="width: 200px" type="text" id="testinput" value="" />
                <input type="submit" value="submit" />
            </form>
            </div>
    </div>
    <script type="text/javascript">
        var options = {
            script:"test.php?json=true&limit=6&",
            varname:"input",
            json:true,
            shownoresults:false,
            maxresults:6,
            callback: function (obj) { document.getElementById('testid').value = obj.id; }
        };
        var as_json = new bsn.AutoSuggest('testinput', options);
  
        var options_xml = {
            script: function (input) { return "test.php?input="+input+"&testid="+document.getElementById('testid').value; },
            varname:"input"
        };
        var as_xml = new bsn.AutoSuggest('testinput_xml', options_xml);
    </script>
</body>
</html>

Yukarıdaki kodlarımızda script:”test.php?json=true&limit=6&”, satırımızdaki limit ile sorgulanacak veri limitimizi belirlemiş oluyoruz. text.php dosyamızdaki “aUsers” dizimizde sorguluyuruz input’dan gelen veriyi. “aUsers” dizimizdeki karşılaştırma sonunda uluşan verileri inputumuz altında alt alta diziyoruz kullanıcılarımızın seçebilecegi bir şekilde.

Örneğimizde veri tabanından sorgulama yaparak “aUsers” dizimize veri atmadık. İsterseniz veri tabanından sorgulama yapabilir, yapılan sorgu sonucu veritabanımızın; örneğin user tablomuzdaki verileri “aUsers” dizimize atarız ve ardından kullanıcılarımızın arama işlemlerinde sorguları veri tabanından çekmelerini sağlamış oluruz.

This entry was posted on Cuma, Kasım 6th, 2009 at 17:20 and is filed under Ajax. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.