ورود / ثبت نام
0
0

Bootstrap Autocomplete textbox با استفاده از jQuery

248 بازدید
Bootstrap AutoComplete TextBox

Bootstrap AutoComplete TextBox

در این مقاله نشان می دهیم که چگونه با استفاده از jQuery می توانیم bootstrap autocomplete textbox از طریق دیتابیس را در ASP.Net انجام دهیم. توضیحات کامل به همراه کد های مربوط ره میتوانید در ادامه ی مطلب مشاهده نمایید. با من همراه باشید …

Bootstrap Autocomplete textbox

قبل از پیاده سازی این مثال، ابتدا یک جدول با نام userdetails به صورت زیر در دیتابیس ایجاد می کنیم.

Bootstrap AutoComplete TextBox

بعد از طراحی جدول در دیتابیس، یک سری داده به عنوان مثال در جدول وارد می کنیم تا از آن ها در اپلیکیشن استفاده نماییم.

حالا صفحه aspx را باز کرده و کد زیر را در آن می نویسیم:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Autocomplete Textbox Example without using Typehead.js</title>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel = "Stylesheet" href = "https://twitter.github.io/typeahead.js/css/examples.css"></link>
<script type="text/javascript">
$(function () {
$('#txtSearch').keyup(function () {
$.ajax({
url: "BootstrapAutoComplete.aspx/GetAutoCompleteData",
data: "{'username':'" + $('#txtSearch').val() + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var val = '<ul id="userlist">';
$.map(data.d, function (item) {
var itemval = item.split('/')[0];
val += '<li class=tt-suggestion>' + itemval + '</li>'
})
val += '</ul>'
$('#divautocomplete').show();
$('#divautocomplete').html(val);
$('#userlist li').click(function () {
$('#txtSearch').val($(this).text());
$('#divautocomplete').hide();
})
},
error: function (response) {
alert(response.responseText);
}
});
})
$(document).mouseup(function (e) {
var closediv = $("#divautocomplete");
if (closediv.has(e.target).length == 0) {
closediv.hide();
}
});
});
</script>
<style type="text/css">
ul li
{
list-style: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="position: absolute;left: 18%; z-index: 100; text-align:left;">
<input type="text" class="typeahead" id="txtSearch" placeholder="Type username to search"autocomplete="off" />
<div id="divautocomplete" class="tt-menu" style="display:none">
</div>
</div>
</form>
</body>
</html>

فضاهای نام زیر را به code behind اضافه می کنیم.

در کد C#:

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Data.SqlClient;

و کد زیر را در قسمت code behind می نویسیم.

[WebMethod]
public static List<string> GetAutoCompleteData(string username)
{
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB"))
{
using (SqlCommand cmd = new SqlCommand("select UserId,UserName from userdetails where UserName LIKE '%'+@SearchText+'%'", con))
{
con.Open();
cmd.Parameters.AddWithValue("@SearchText", username);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
result.Add(string.Format("{0}/{1}", dr["UserName"], dr["UserId"]));
}
return result;
}
}
}

کد VB.Net:

Imports System.Collections.Generic
Imports System.Web.Services
Imports System.Data.SqlClient
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs)
End Sub
<WebMethod()> _
Public Shared Function GetAutoCompleteData(ByVal username As String) As List(Of String)
Dim result As New List(Of String)()
Using con As New SqlConnection("Data Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB")
Using cmd As New SqlCommand("select UserId,UserName from userdetails where UserName LIKE '%'+@SearchText+'%'", con)
con.Open()
cmd.Parameters.AddWithValue("@SearchText", username)
Dim dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
result.Add(String.Format("{0}/{1}", dr("UserName"), dr("UserId")))
End While
Return result
End Using
End Using
End Function
End Class

موفق باشید !

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17753
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد Bootstrap Autocomplete textbox با استفاده از jQuery

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.