自动完成jquery插件不工作，当数据来自数据库

本文关键字：数据 数据库 工作 jquery 插件 | 更新日期: 2023-09-27 18:13:22

我使用这个插件的文本区建议(自动完成)。只要list是硬编码的，它就可以正常工作。像这样:-

var suggest = ["Action"， "ActionScript"， "Borland"];

但是我需要数据库中的单词列表。当我从数据库中获取列表时，插件不响应。下面是我正在做的:-

我正在使用的插件:-

https://github.com/imankulov/asuggest/

Jquery

: - 

$(document).ready(function() {
        var suggests = getList();
        var $txt = $('#<%=txtArea.ClientID %>');
        $txt.asuggest(suggests);
    });
function getList() {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ajaxService.asmx/autocompletelist",
        data: "{groupUid:'" + 4 + "', clientUid: '" + 8 + "'}",
        dataType: "json",
        success: function(data) {
            return (data.d);
        },
        error: function(result) {
            alert("No Match");
        }
    });
}

背后的代码:

[WebMethod]
public List<string> autocompletelist(int groupUid, int clientUid)
{
        //call to database for the list. 
          //code/
        List<string> result = new List<string>();
        result.Add("Action");
        result.Add("ActionScript");
        result.Add("Borland");
        return result;
}

请建议?这和方括号有关吗?如何从数据库中得到回报?

自动完成jquery插件不工作，当数据来自数据库

ajax success函数是异步执行的(在收到响应之前它不会被触发)，但是您试图以同步方式使用它的结果。所以当你调用$txt.asuggest(suggests);时，什么都没有发生因为suggests还没有被填充。这是因为ajax请求尚未完成，但您的代码不知道这一点。修复此问题的最简单方法是将UI的逻辑放在success方法本身中。这样你的插件不会被调用，直到suggests变量被保证填充。试试这个:

$(document).ready(function() {
    getList();
});
function getList() {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "ajaxService.asmx/autocompletelist",
        data: "{groupUid:'" + 4 + "', clientUid: '" + 8 + "'}",
        dataType: "json",
        success: function(data) {
            var $txt = $('#<%=txtArea.ClientID %>');
            $txt.asuggest(data);
        },
        error: function(result) {
            alert("No Match");
        }
    });
}

您可以先这样做alert(suggest)，检查结果是否正确，然后将结果转换为数组。将json转换为数组:

var dataArray=eval(jsonStr);
for(var i in dataArray)
{
    //TODO
}
相关文章：