当数据来自数据库时，自动完成 jquery 插件不起作用？

Posted 2023-05-08

【中文标题】当数据来自数据库时，自动完成 jquery 插件不起作用？

【英文标题】：Autocomplete jquery plugin does not work when data comes from database?

【发布时间】：2017-02-26 22:07:43

【问题描述】：

我正在将此插件用于文本区域建议（自动完成）。只要列表是硬编码的，它就可以正常工作。像这样：-

var 建议 = ["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;

请建议？它与方括号有关吗？如何从数据库中获取返回值？

【参考方案1】：

一个 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");
        
    );

【讨论】：

:) 谢谢。这就是问题所在。

【参考方案2】：

你可以先这样alert(suggests)，检查结果是否正确，然后将结果转换为数组。 将json转换为数组：

var dataArray=eval(jsonStr);
for(var i in dataArray)

    //TODO