جستجوی آیتم های AutoSuggest با استفاده از jQuery, Ajax و JSON
جمعه 17 اردیبهشت 1395در این مقاله درباره ی آیتم های پیشنهادی که در هنگام جستجو در زیر کادر جستجو به صورت خودکار لیست میشود ، مانند جستجودر لیست محصولات وب سایت و یا جستجوی کلمه ای ساده در تجارت الکترونیک ،صحبت خواهیم کرد و نمونه ای از آن در C# با استفاده از 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">
هم اکنون میخواهیم یک پروژه فرم وب بنویسیم که در آن کادر جستجو و یک دکمه وجود دارد. برای درک بهتر ، تصویر زیر را مشاهده کنید.
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>
در هر جستجو و در هر فراخوانی تابع ، متن ورودی بصورت کلیدی شده و در جستجوی بعدی ، بصورت خودکار به عنوان پیشنهاد در دسترس قرار میگیرند.
$('#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; } }
با استفاده از این نمونه ، در هر بار جستجو کلمات کلیدی برای شما لیست میشودو شما به راحتی میتوانید موارد مورد نظر خود را در این لیستها پیدا کنید.
خروجی
- ASP.net
- 2k بازدید
- 1 تشکر