自动完成jquery不工作
本文关键字:工作 jquery | 更新日期: 2023-09-27 18:20:20
我有一个文本框,在里面,我想让它自动完成。自动完成的数据将通过数据库提供。
这是我的Jquery:
var data = "autocompletetagdata.aspx"
$("#item").autocomplete({
source: data
});
这就是我现在在自动完成标签数据中所做的:
protected void Page_Load(object sender, EventArgs e)
{
string term = Request.QueryString["term"];
SqlConnection myConnection = new SqlConnection(connStr);
myConnection.Open();
string SQL = ("select Top 10 LTRIM(RTRIM(PGPRDC)) As PGPRDC FROM SROPRG SROPRG");
SqlCommand myCommand = new SqlCommand(SQL, myConnection);
StringBuilder sb = new StringBuilder();
try
{
SqlDataReader reader = myCommand.ExecuteReader();
if (reader.HasRows)
{
while (reader.Read())
{
sb.Append(reader.GetString(0))
.Append(Environment.NewLine);
}
}
reader.Close();
}
catch (Exception ex)
{
myConnection.Close();
}
myConnection.Close();
Response.Write(sb.ToString());
//return "['word', 'hello', 'work', 'oi', 'hey']";
}
我做错了什么?
编辑:
<script type="text/javascript" src="/scripts/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.flash.min.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.sifr.min.js"></script>
<script type="text/javascript" src="/scripts/js/global.js"></script>
<script type="text/javascript" src="/scripts/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="/scripts/js/orderstatus.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="/scripts/js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript" src="/scripts/js/json_parse.js"></script>
当您转到自动完成标记数据时。。aspx在浏览器中返回屏幕。。。
SC052 SC053 SC055 SC060 SC061 SC062 SC063 SG011 SG014 SG015
Firebug也会在响应中显示这些项目,但文本框
这是Jquery代码:
$("#txt1").autocomplete({
source: function (request, response){
$.ajax({
type: "POST",
url: "YourAddress",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
response($.map(data.d, function (item) {
return {
id: item.Value,
value: item.Text
}
}))
}
});
},
select: function (event, ui) {
$("#hdnId").val(ui.item.id);//Put Id in a hidden field
}
});
调用ajax请求并返回JSON数据,如下所示:
[{"Value":val1,"Text":"text1"},
{"Value":val2,"Text":"text2"}]
对于这样的回报,你必须定义一个这样的类:
public class Autocomplete
{
private int val;
private string text;
public int Value
{
get
{
return val;
}
set
{
val = value;
}
}
public string Text
{
get
{
return text;
}
set
{
text = value;
}
}
}
因此,返回一个此类对象列表(List<Autocomplete>
)就足够了。因此,创建这个列表并用sql命令填充它,然后将其作为XMLHTTPRequest 的响应返回
我测试过了。它很好用,
祝你好运。Foroughi
我不确定这是否像我想的那样有效,但:autocompletetagdata.aspx可能正在显示数据,但当您执行source:data时,数据还没有准备好,我的意思是它不包含数据。我通过在回调函数中填充source(此处为autocompletetagdata.aspx的回调)来解决类似的问题。
我对自动完成有问题。我到达这里是因为你包括qtip。这两个库(jquery/autocomplete和qtip)在同时使用时会出现问题。