用于Web应用程序的vb.net中的autosuggest文本框 [英] autosuggest text box in vb.net for web application
本文介绍了用于Web应用程序的vb.net中的autosuggest文本框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好先生/妈妈，
我正在使用asp.net进行网络应用，我想制作 autosuggest 我在其中输入数据并与数据库表匹配的框，并在网页上的文本框下方显示列表，但它显示错误。
my html代码是：
hello sir/mam,
I am using asp.net for web application and I want to make a autosuggest box in which I input data and match with database table and show the list below the textbox on the web page, but it shows an error.
my html code is :
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AutoComplete Textbox with webservice using jQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
SearchText();
});
function SearchText() {
$(".autosuggest").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "webservice.asmx/GetAutoCompleteData",
data: "{'empname':'" + document.getElementById('txtSearch').value + "'}",
dataType: "json",
success: function(data) {
response(data.d);
},
error: function(result) {
alert("Error");
}
});
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
<label for="tbAuto">empname: </label>
<input type="text" id="txtSearch" class="autosuggest" />
</div>
</div>
</form>
</body>
</html>
和我的webservice.asmx代码是：
and my webservice.asmx code is :
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Collections.Generic
<WebService([Namespace]:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
Public Class AutoCompleteService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetAutoCompleteData(ByVal empname As String) As List(Of String)
Dim result As New List(Of String)()
Using con As New SqlConnection("Data Source=.;Initial Catalog=appraisal;User ID=sa;Password=database")
Using cmd As New SqlCommand("select DISTINCT empname from EmpMst where empname LIKE '%'+@SearchText+'%'", con)
con.Open()
cmd.Parameters.AddWithValue("@SearchText", empname)
Dim dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
result.Add(dr("empname").ToString())
End While
Return result
End Using
End Using
End Function
End Class
我不知道在哪里写这个代码是否 webservice.asmx 页面或 default.aspx.vb page
当我运行此代码时，它会显示一个警告框（来自html页面的错误）。
I donot know where to write this code whether on it webservice.asmx page or default.aspx.vb page
When I run this code, then it displays a alert box(error from the html page).
推荐答案
（ document ）。ready（ function （）{
SearchText（）;
}）;
function SearchText（）{
(document).ready(function() { SearchText(); }); function SearchText() {
（ 。autosuggest）。autocomplete（{
source： function （request，response）{
(".autosuggest").autocomplete({ source: function(request, response) {
.ajax（{
type： POST，
contentType： application / json; charset = utf-8，
url： webservice.asmx / GetAutoCompleteData，
data： {'empname'：' + document .getElementById （' txtSearch'）。value + '}，
dataType： json，
成功： function （data）{
response（data.d）;
}，
错误： function （结果）{
alert（ 错误）;
}
}）;
}
}）;
}
< / 脚本 >
< / head >
< body >
< 表单 id = form1 runat < span class =code-keyword> = server >
< div class = demo >
< div class = ui-widget >
< 标签 = tbAuto > empname：< / label >
< 输入 type = text id = txtSearch class = autosuggest / >
< / div >
< / div >
< / form >
< / body > ;
< / html >
.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "webservice.asmx/GetAutoCompleteData", data: "{'empname':'" + document.getElementById('txtSearch').value + "'}", dataType: "json", success: function(data) { response(data.d); }, error: function(result) { alert("Error"); } }); } }); } </script> </head> <body> <form id="form1" runat="server"> <div class="demo"> <div class="ui-widget"> <label for="tbAuto">empname: </label> <input type="text" id="txtSearch" class="autosuggest" /> </div> </div> </form> </body> </html>
和我的webservice.asmx代码是：
and my webservice.asmx code is :
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data.SqlClient
Imports System.Collections.Generic
<WebService([Namespace]:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
Public Class AutoCompleteService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetAutoCompleteData(ByVal empname As String) As List(Of String)
Dim result As New List(Of String)()
Using con As New SqlConnection("Data Source=.;Initial Catalog=appraisal;User ID=sa;Password=database")
Using cmd As New SqlCommand("select DISTINCT empname from EmpMst where empname LIKE '%'+@SearchText+'%'", con)
con.Open()
cmd.Parameters.AddWithValue("@SearchText", empname)
Dim dr As SqlDataReader = cmd.ExecuteReader()
While dr.Read()
result.Add(dr("empname").ToString())
End While
Return result
End Using
End Using
End Function
End Class
我不知道在哪里写这个代码是否 webservice.asmx 页面或 default.aspx.vb page
当我运行此代码时，它会显示一个警告框（来自html页面的错误）。
I donot know where to write this code whether on it webservice.asmx page or default.aspx.vb page
When I run this code, then it displays a alert box(error from the html page).
这篇关于用于Web应用程序的vb.net中的autosuggest文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
