جستجوی آیتم های AutoSuggest با استفاده از jQuery, Ajax و JSON

جمعه 17 اردیبهشت 1395

در این مقاله درباره ی آیتم های پیشنهادی که در هنگام جستجو در زیر کادر جستجو به صورت خودکار لیست میشود ، مانند جستجودر لیست محصولات وب سایت و یا جستجوی کلمه ای ساده در تجارت الکترونیک ،صحبت خواهیم کرد و نمونه ای از آن در C# با استفاده از jQuery, Ajax و JSON ایجاد میکنیم.

جستجوی آیتم های AutoSuggest با استفاده از jQuery, Ajax و JSON

پیش نیازها
دانش مقدماتی از،
JQuery
AJAX
JSON

JS

    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
      
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  

 

CSS

    <link rel="stylesheet"href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  

 

هم اکنون میخواهیم یک پروژه  فرم وب بنویسیم که  در آن کادر جستجو و یک دکمه وجود دارد. برای درک بهتر ، تصویر زیر را مشاهده کنید.

Search

 

UI

    <div role="search" method="get" class="search-form">   
       <input type="search" class="search-field" placeholder="So, What are you looking for" value="" id="searchresult" title="Search">   
       <input type="submit" class="search-submit" value="">   
    </div>  

run

 

در هر جستجو و   در هر فراخوانی  تابع  ، متن ورودی بصورت  کلیدی شده و در جستجوی بعدی ،  بصورت  خودکار  به عنوان پیشنهاد در دسترس قرار میگیرند.

$('#searchresult').keyup(function(event)  
{  
    ptxt = $('#searchresult').val();  
    $('#searchresult').autocomplete(  
    {  
        scroll: true,  
        selectFirst: false,  
        autoFocus: false,  
        source: function(request, response)  
        {  
            $.ajax(  
            {  
                type: "POST",  
                contentType: "application/json; charset=utf-8",  
                url: "../login.asmx/searchresult",  
                data: "{'prefixtext':'" + ptxt + "'}",  
                dataType: "json",  
                success: function(data)  
                {  
                    response($.map(data.d, function(item)  
                    {  
                        return {  
                            label: item.split('/')[0],  
                            val: item.split('/')[1]  
                        }  
                    }));  
                },  
                error: function(result) {}  
            });  
        },  
        minLength: 2,  
        select: function(event, ui)  
        {  
            var vll = ui.item.val;  
            var sts = "no";  
            var url = 'Productlist.aspx?prefix=' + ptxt; // ur own conditions  
            $(location).attr('href', url);  
        }  
    });  
    if(event.keyCode == 13)  
    { // this event fired when enter is pressed  
        url = 'Productlist.aspx?prefix=' + ptxt; // ur own conditions  
        $(location).attr('href', url);  
        return false;  
    }  
});  
$('#sch').click(function()  
{ //  this event fired on button click  
   ptxt = $('#searchresult').val();  
   url = 'Productlist.aspx?prefix=' + ptxt; // ur own conditions  
   $(location).attr('href', url);  
});  

کد بالا  تمام شرایط را برای جستجو را پوشش میدهد. که آیا در جستجوی  مورد خاص وجود دارد،  و یا جستجو  مربوط به یک کلمه کلیدی خاص است و ....


login.asmx/searchresult Page : تابع به طور خودرو  برای نمایش  صفحه جستجو استفاده می شود. با  هر کلیک ، این تابع فراخوانی و نتیجه را نمایش میدهد.

    [WebMethod(EnableSession = true)]  
    public List < string > searchresult(string prefixtext)  
    {  
        List < string > result = new List < string > ();  
        SqlConnection con = null;  
        con = (SqlConnection) HttpContext.Current.Session["conn"];  
        using(SqlCommand cmd = new SqlCommand("select pa.product_id,product_code,product_name,pa.category_id,pa.subcategory_id, where pa.avail_start<=GETDATE() and pa.avail_end>=GETDATE() and (product_code like '%" + prefixtext + "%' or product_name like '%" + prefixtext + "%' or category_name like '%" + prefixtext + "%' or subcategory_name like '%" + prefixtext + "%')", con))  
        {  
            con.Open();  
            SqlDataReader dr = cmd.ExecuteReader();  
            while(dr.Read())  
            {  
                result.Add(string.Format("{0}/{1}", dr["product_name"], dr["product_id"]));  
            }  
            con.Close();  
            return result;  
        }  
    }  

 با استفاده از این نمونه ، در هر بار جستجو کلمات کلیدی برای شما لیست میشودو شما به راحتی میتوانید موارد  مورد نظر خود را در این لیستها پیدا کنید.

 

خروجی

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید