Question

我有一个文本框，在里面我想让它自动完成。自动完成的数据将通过数据库提供。

这是我的Jquery：

 var data = "autocompletetagdata.aspx"
    $("#item").autocomplete({
        source: data
    });


protected void Page_Load(object sender, EventArgs e) {
   return "['word', 'hello', 'work', 'oi', 'hey']";     
}

Answer 1

试试这个：

$("#item").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            url: "autocompletetagdata.aspx/Search",
            data: { "search": request.term },
            contentType: "application/json; charset=utf-8",
            success: function (results) {
                var data = $.parseJSON(results);
                response($.map(data, function (item) { 
                    return { value: item } 
                }))
            }
        });
    }
});

在您的代码中，将其设为网络方法：

[WebMethod]
public static void Search(string search)
{
    string[] list = new [] { "word", "hello", "work", "oi", "hey" };

    return list.Where(x => x.StartsWith(search));
}

Answer 2

我认为错误的是你必须返回json格式的数据而不是逗号分隔的字符串。看看demos page，它说：

数据源是一个返回JSON数据的服务器端脚本，通过source-option的简单URL指定。

Answer 3

根据：http://www.srikanthtechnologies.com/blog/dotnet/jqueryautocomplete.aspx 尝试返回一个字符串列表。


[WebMethod]
public static List<string> PopSearch()
{
 return new List<string> { "oi", "oi", "hey"};
}

Answer 4

jQuery autocomplete期望json作为结果，所以这将起作用

return "['word', 'hello', 'work', 'oi', 'hey']";

对于更复杂的数据，请考虑使用JavaScriptSerializer

Answer 5

由于似乎没有什么对你有用，请确保你已经掌握了基础知识：

您是否正在加载jQuery和jQuery UI库？（自动完成是jQuery UI）
您是否在DOM ready函数中调用jQuery代码？
您可以直接在浏览器中点击您的网络方法并获取数据吗？

Answer 6

使用数据自动完成并不是那么难。首先，您需要建立您的退货类型。最容易采用json格式：

PHP控制器结束

// be sure to use echo, not return
echo json_encode($yourDataAsArrayOrObject);

完成该部分后，请回到您的javascript

$("#item").autocomplete({
    // source should be a url to the controller function that returns the data
    source: 'www.yoursite.com/controller/function',
    search: function(e, ui) {}, // here you can manipulate other elements or items while the data is being retrieved,
    select: function(e, ui) { /* ui.item is item slected */ } // here you can manipluate things based on the item that was selected, for instance, save a list of sub data to another dom element
});

最后，警告

// You will need to use ._renderItem to items as they are received by database.
// For instance, if you want to display the dropdown items in a custom way.
$("#item")._renderItem = function(ul, item) {  
  // the item. depends on the information you got from server
  return ul.append($("<li></li>").prepend($("<h3></h3>").text(item.label)).append($("<p></p>").text(item.value)));
};

Answer 7

在示例中，返回的数据用单引号（['word'，'hello'，'work'，'oi'，'hey']）分隔，但不生成有效的JSON。

只需用双引号替换单引号即可。示例：'word'变为“word”。根据你如何构建字符串服务器端，你可能需要转义双引号，如“[”“word”“，”“hello”“等等

protected void Page_Load(object sender, EventArgs e) {
   return "[""word"", ""hello"", ""work"", ""oi"", ""hey""]";     
}

祝你好运。

Answer 8

@Troy Barlow，您的意思显然是

(ab)*

Answer 9

 protected void Page_Load(object sender, EventArgs e)
{
    string term = Request.QueryString["term"];
   SqlConnection myConnection = new SqlConnection(connStr);
   myConnection.Open();
   string result = "[";
   int i = 0;
   string SQL = ("select LTRIM(RTRIM(PGPRDC)) As PGPRDC FROM SROPRG SROPRG where PGPRDC like '" + term + "%'");
   SqlCommand myCommand = new SqlCommand(SQL, myConnection);
   StringBuilder sb = new StringBuilder();
   try
      {
        SqlDataReader reader = myCommand.ExecuteReader();
        if (reader.HasRows)
        {
           while (reader.Read())
           {
             result += "";
             result += "\"" + reader.GetString(0) + "\"";                          
             result += ",";
             i += 1;
             sb.Append(reader.GetString(0))
                           .Append(Environment.NewLine);
            }
        }
        reader.Close();
      }
   catch (Exception ex)
   {
      myConnection.Close();
   }
   result = result.Substring(0, result.Length - 1);
   myConnection.Close();
   result += "]";   
   Response.Write(result);  
}

如何完成自动完成jquery的后端

9 个答案: