jqGrid 工具栏搜索，使用 json 数据自动完成

Question

我发现了 Oleg 的非常好的演示（http://www.ok-soft-gmbh.com/jqGrid/FillToolbarSearchFilter.htm），它显示了“使用本地数据自动完成的 jqGrid 工具栏搜索”，但很难让它工作通过 ajax 获取 json。即使我在加载后强制网格位于本地，自动完成功能不起作用是否有充分的理由？

$(document).ready(function() {

    var mygrid = $("#mylist"),
    mygetUniqueNames = function(columnName) {
        var texts = mygrid.jqGrid('getCol',columnName), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
        for (i=0;i<textsLength;i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        return uniqueTexts;
    };





    mygrid.jqGrid({
            url:'autocompleteTest.php',
            datatype: "json",
            colNames:['name', 'City','stateCd'],
            colModel:[                      
                    {name:'name',index:'name',width:225, search: true},
                    {name:'City',index:'City',width:125},
                    {name:'stateCd',index:'stateCd',width:75},
                  ],

         rowNum: 100,
        loadonce : true,
         sortname: 'name',
        sortorder: 'desc',
         sortable: true,
        viewrecords: true,
        rownumbers: true,
        sortorder: "desc",
        ignoreCase: true,
        pager: '#mypager',
        height: "auto",
        caption: "How to use filterToolbar better with data from server"
    }).jqGrid('navGrid','#mypager',
              {edit:false, add:false, del:false, search:false, refresh:false});

    mygrid.jqGrid('setColProp', 'name',
            {
                searchoptions: {
                    sopt:['bw'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:mygetUniqueNames('name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

    mygrid.jqGrid('filterToolbar',
            {stringResult:true, searchOnEnter:true, defaultSearch:"bw"});

    });

Answer 1

很难提供使用 jQuery UI Autocomplete 的远程 source 参数的示例。主要问题是你的问题是关于 jqGrid 的，它是纯 JavaScript 解决方案。如果我们讨论该解决方案的服务器部分，我们会有太多选择。许多用户使用不同的语言：Java、C#、VB、PHP 等。例如我个人更喜欢C#。然后我们必须选择我们使用的技术：ASP.NET MVC、WCF、ASPX Web 服务等。例如我会选择WCF。然后我们应该定义数据库访问技术，例如Entity Framework、LINQ to SQL、SqlDataReader、SqlDataAdapter等。让我们选择实体框架，并为您提供相应的代码示例，但如果您使用 PHP 和 MySQL 等，它不会真正帮助您。

因此，我只是描述哪个接口应该拥有用于 jQuery UI 自动完成的远程 source 参数的服务器，无需任何代码。

您应该在我的示例中将 source 参数替换为您的服务器 URL，如下所示：

dataInit: function(elem) {
    $(elem).autocomplete({
        source:'yourSearchUrl.php',
        minLength:2
    });
}

如果用户键入两个字符（可以通过 minLength 选项更改该值），例如 ' ab' 那么自动完成将使用参数 term=ab 发出 HTTP GET 请求：

yourSearchUrl.php?term=ab

您的服务器应使用与本地源格式相同的 JSON 数据进行应答。我在前面的示例中使用了字符串数组格式。另一种支持的格式是具有 label/value/both 属性的对象数组，例如

[
    {
        "id": "Dromas ardeola",
        "label": "Crab-Plover",
        "value": "Crab-Plover"
    },
    {
        "id": "Larus sabini",
        "label": "Sabine`s Gull",
        "value": "Sabine`s Gull"
    },
    {
        "id": "Vanellus gregarius",
        "label": "Sociable Lapwing",
        "value": "Sociable Lapwing"
    },
    {
        "id": "Oenanthe isabellina",
        "label": "Isabelline Wheatear",
        "value": "Isabelline Wheatear"
    }
]

阅读文档了解更多信息。

如果您需要实现更复杂的场景并向服务器发送一些附加数据或以任何方式转换服务器响应，您可以使用自定义源回调函数。在这种情况下，您应该使用 source: function(request, response) {/*您的实现*/}，其中 request 是一个具有 term< 的对象/code> 属性 (request.term)。在您的实现内部，您应该手动向服务器发出 ajax 请求。 response 将是回调函数，您应该在自定义 ajax 请求完成后调用该函数（在 success 事件处理程序内）。应使用与 mygetUniqueNames 返回格式相同的数组参数调用 response 函数。我建议您检查 jQuery Autocomplete 演示 中的源代码。

为了能够从表的一列中提供唯一的数据，您应该只使用大多数数据库都支持的 SELECT DISTINCT SQL 语句。

希望我的描述对您有所帮助。

更新：如果您有本地源，您可以在 我的旧答案，您已经使用过。您只需调用 filterToolbar < strong>源数组填充后。因为您从服务器加载数据，所以应该移动 filterToolbar< 的调用/a> loadComplete 内。您使用 loadonce:true jqGrid 选项，在第一个之后将 datatype 从 'json' 切换到 'local'数据加载。因此，您可以在 loadComplete 事件处理程序中包含您的网格代码如下：

var grid = $('#list');
grid({
    url:'autocompleteTest.php',
    datatype: 'json',
    loadonce: true,
    // ... other parameters
    loadComplete: function(data) {
        if (grid.getGridParam('datatype') === 'json') {
            // build the set 'source' parameter of the autocomplete
            grid.jqGrid('setColProp', 'name', {
                searchoptions: {
                    sopt:['bw'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:mygetUniqueNames('name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });
            mygrid.jqGrid('filterToolbar',
                          {stringResult:true,searchOnEnter:true,
                           defaultSearch:"bw"});
        }
    }
});

如果您需要从服务器重新加载数据（将 datatype 更改为 'json' 并调用 grid.trigger( 'reloadGrid')) 您必须更改上面的代码，以便首先使用 $('#gs_name').autocomplete('destroy') 销毁 autocomplete 小部件，然后使用与 dataInit 内部相同的代码再次创建它。