آشنایی با افزونه های Jquery.معرفی افزونه ی Jquery Autocomplete

جمعه 3 تیر 1390 07:24 ب.ظ ویرایش: جمعه 3 تیر 1390 10:23 ب.ظ

توسط: محمدرضا

ارسال به

در این پست و پست های بعدی قصد داریم به معرفی افزونه های jquey و نحوه ارتباط آنها در ASP.Net بپردازیم.

در این مقاله می خواهیم نحوه استفاده از افروزنه autocomplete در asp.net به منظور بازیابی اطلاعات از یک webmethod را توسط Ajax نشان دهیم.

برای این منظور ابتدا دو افزونه jquery-1.4.1.min.js و jquery-ui.min.js و یک کلاس jquery-ui-1.8.13.custom.css رو به صفحه اضافه می کنیم.

<head >

نحوه استفاده از افزونه نیز به صورت زیر می باشد:

$(function () {

$("#PersonName").autocomplete({

source: function (request, response) {

$.ajax({

url: "Default.aspx/GetPerson",//متدی که اطلاعات به آن فرستاده و خوانده می شود

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8",

data: "{ 'name': '" + request.term + "'}",//پارامتری که به متد فرستاده می شود

success: function (data) {

response($.map(data.d, function (item) {

return {

value: item.ProductName//افزودن اطلاعات به منو

}

}));

}

});

minLength: 1

});

</script>

بعد از مشخص کردن کنترلی که می خواهیم افزونه را به آن اعمال کنیم$("#PersonName") در قسمت source منبع اطلاعاتی رو مشخص می کنیم که در اینجا از طریق Ajax اطلاعات را از یک WebMethod دریافت می کنیم.توضیحات بیشتر در مورد Ajax رو می تونید از اینجا مشاهده کنید.به ازای هر کاراکتری که در کنترل textbox وارد می شود اطلاعات توسط دستور request به WebMethod ارسال شده و اطلاعات بازگشتی با دستور response به منوی autocomplete در صورت وجود اضافه می شود.

minLength:حداقل تعداد کاراکتری که باید وارد شود تا افزونه عمل کند.

[WebMethod]

public static List<Person> GetPerson(string name)

{

var context = new Person();

var query = from Person c in context.GetPerson() where c.PersonName.StartsWith(name) select new Person() { PersonName = c.PersonName };

return query.ToList();

}

در این متد هر مقداری که توسط دستور request ارسال می شود جستجو شده و نتیجه به صورت List برمی گردد.

توسط کلاس .ui-autocomplete می توان تغییراتی در ظاهر افزونه ایجاد کرد که از جمله خصوصیات عبارتند از:

max-height: حداکثر ارتفاع منو.در صورت لزوم Scroll عمودی فعال می شود.

max-width: حداکثر پهنای منو.در صورت لزوم Scroll افقی فعال می شود.

padding-righ:فاصله آیتم ها از لبه سمت راست منو

padding-left: فاصله آیتم ها از لبه سمت چپ منو

همچنین توسط کلاس .ui-autocomplete-loading می توان یک آیکون loading به کنترل اضافه کرد.

دریافت پروژه

برچسب ها:jquery autocomplete in asp.net ،jquery autocomplete ،jquery plugin ،
دنبالک ها:Jquery Autocomplete ،

نظرات()

iranexperts

آموزش جی کوئری ، html5 و CSS3

آشنایی با افزونه های Jquery.معرفی افزونه ی Jquery Autocomplete

iranexperts

درباره وبلاگ

آخرین پستها

نویسندگان

آمار وبلاگ

اَبر برچسبها

آرشیو موضوعی

آرشیو

پیوندها

صفحات جانبی