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

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

如果使用

source

jQuery UI Autocomplete 的远程参数，则很难提供示例。主要问题是您的问题是关于jqGrid的，它是
纯Javascript
解决方案。如果我们要讨论解决方案的服务器部分，我们将有太多选择。许多用户使用不同的语言：Java，C＃，VB，PHP等。例如，我个人更喜欢C＃。然后，我们必须选择使用的技术：ASP.NET
MVC，WCF，ASPX Web服务等。例如，我将选择WCF。然后，我们应该定义数据库访问技术，例如Entity framework，LINQ to SQL

SqlDataReader

，

SqlDataAdapter

等等。让我们选择实体框架，并为您提供相应的代码示例，但是如果使用PHP和MySQL这样的示例，它并不会真正帮助您。

因此，我只描述 没有任何代码*

source

的jQuery UI Autocomplete 远程参数的服务器应该具有哪个接口。 *

您应该在我的示例中将

source

参数替换为服务器url，如下所示：

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

如果用户键入两个字符（可以通过

minLength

选项更改值），例如“ ab”，则自动完成将发出带有参数的HTTP GET请求

term=ab

：

yourSearchUrl.php?term=ab

您的服务器应以与本地源相同的格式回答JSON数据。我在前面的示例中使用了字符串数组格式。另一种受支持的格式是具有标签/值/两个属性的对象数组，例如

[    {        "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

属性（

request.term

）的对象。在实现内部，您应该手动向服务器发出ajax请求。该

response

会回调函数，你应该打电话
后您的自定义Ajax请求
将完成（内部

success

事件处理程序）。该

response

函数应使用参数进行调用，该参数应为与

mygetUniqueNames

返回相同格式的数组。我建议您检查jQuery
Autocomplete 演示中的源代码。

为了能够从表格的一列中提供唯一的数据，您应该只使用

SELECT DISTINCT

大多数数据库都支持的SQL语句。

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

更新*
：如果您有本地资源，则可以在我以前使用的答案中找到解决方案。您只需要 在填充源数组后
调用filterToolbar
。因为您是从服务器加载数据，所以应该将filterToolbar的调用移到loadComplete内部。您可以使用该开关的jqGrid选项从对第一个数据加载后。因此，您可以在网格的loadComplete事件处理程序中包含如下代码：
*

loadonce:true``datatype``'json'``'local'

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

to

'json'

并调用

grid.trigger('reloadGrid')

），则必须更改上面的代码，以便首先使用破坏

autocomplete

小部件，

$('#gs_name').autocomplete('destroy')

然后再使用相同的代码（如内）来再次创建它

dataInit

。