如何让JQuery Autocomplete与类别一起使用？(How to get JQuery Autocomplete to work with categories?)

我有一个输入字段，如：

<input id="categoria" name="nome_categoria" type="text" required minlength="2">

在JS中，我（来自Jquery网站）：

$.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } });

我以有效的JSON格式从PHP获取数据：

[{"Label":"Vendas","Category":"Recebimentos"},{"Label":"Fornecedores","Category":"Pagamentos"}]

我尝试了几件事，但没有人使用自动完成功能来处理类别：

$('#categoria').catcomplete({ delay:0, source: 'search.php', });

我可以在Chrome开发工具的“网络”标签中看到，我在输入字段中输入的字母正在搜索，但输入表单中没有显示任何内容，所以我试过：

$('#categoria').autocomplete({ minLength:1, source: function(request, response) { $.ajax({ url: 'search.php', dataType: 'json', data: { palavra : request.term }, success: function(result) { response(result); } }); } });

第二种方法是使用输入中键入的字母过滤从PHP返回的JSON，看起来没问题，但我在字段中得到一个空的下拉框。

我见过类似的问题，包括这个，但到目前为止，没有。 如何通过类别获得自动填充功能？

谢谢你的帮助！

I have an input field like:

<input id="categoria" name="nome_categoria" type="text" required minlength="2">

In JS, I've got (from Jquery website):

$.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } });

I'm getting the data from PHP, in valid JSON format:

[{"Label":"Vendas","Category":"Recebimentos"},{"Label":"Fornecedores","Category":"Pagamentos"}]

I've tried several things but none is making autocomplete to work with categories:

$('#categoria').catcomplete({ delay:0, source: 'search.php', });

I can see in the "Network" tab in Chrome Dev tools, that the letters I type in the input field are being searched, but nothing is displayed in the input form, so I tried:

$('#categoria').autocomplete({ minLength:1, source: function(request, response) { $.ajax({ url: 'search.php', dataType: 'json', data: { palavra : request.term }, success: function(result) { response(result); } }); } });

This second approach is filtering the JSON returned from PHP with the letters typed in the input, it seems OK but I get an empty dropdown box in the field.

I've seen similar questions, including this one but so far, nothing. How do I get autocomplete with categories?

Thanks for your help!

最满意答案

上面的第一个解决方案效果很好，如果不使用“标签”，我使用“标签”而不是“类别”我使用“类别”。

The first solution above works well, if instead of "Label", I use "label" and instead of "Category" I use "category".

如何让JQuery Autocomplete与类别一起使用？(How to get JQuery Autocomplete to work with categories?)

我有一个输入字段，如：

<input id="categoria" name="nome_categoria" type="text" required minlength="2">

在JS中，我（来自Jquery网站）：

$.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } });

我以有效的JSON格式从PHP获取数据：

[{"Label":"Vendas","Category":"Recebimentos"},{"Label":"Fornecedores","Category":"Pagamentos"}]

我尝试了几件事，但没有人使用自动完成功能来处理类别：

$('#categoria').catcomplete({ delay:0, source: 'search.php', });

我可以在Chrome开发工具的“网络”标签中看到，我在输入字段中输入的字母正在搜索，但输入表单中没有显示任何内容，所以我试过：

$('#categoria').autocomplete({ minLength:1, source: function(request, response) { $.ajax({ url: 'search.php', dataType: 'json', data: { palavra : request.term }, success: function(result) { response(result); } }); } });

第二种方法是使用输入中键入的字母过滤从PHP返回的JSON，看起来没问题，但我在字段中得到一个空的下拉框。

我见过类似的问题，包括这个，但到目前为止，没有。 如何通过类别获得自动填充功能？

谢谢你的帮助！

I have an input field like:

<input id="categoria" name="nome_categoria" type="text" required minlength="2">

In JS, I've got (from Jquery website):

$.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } });

I'm getting the data from PHP, in valid JSON format:

[{"Label":"Vendas","Category":"Recebimentos"},{"Label":"Fornecedores","Category":"Pagamentos"}]

I've tried several things but none is making autocomplete to work with categories:

$('#categoria').catcomplete({ delay:0, source: 'search.php', });

I can see in the "Network" tab in Chrome Dev tools, that the letters I type in the input field are being searched, but nothing is displayed in the input form, so I tried:

$('#categoria').autocomplete({ minLength:1, source: function(request, response) { $.ajax({ url: 'search.php', dataType: 'json', data: { palavra : request.term }, success: function(result) { response(result); } }); } });

This second approach is filtering the JSON returned from PHP with the letters typed in the input, it seems OK but I get an empty dropdown box in the field.

I've seen similar questions, including this one but so far, nothing. How do I get autocomplete with categories?

Thanks for your help!

最满意答案

上面的第一个解决方案效果很好，如果不使用“标签”，我使用“标签”而不是“类别”我使用“类别”。

The first solution above works well, if instead of "Label", I use "label" and instead of "Category" I use "category".