Author Topic: Autocomplete with categories  (Read 7920 times)

nuno.nogueira

  • Pro Economy
  • Jr. Member
  • *
  • Posts: 95
    • View Profile
Autocomplete with categories
« on: February 28, 2014, 05:15:34 pm »
I need to use autocomplete with categories, since my data is hierarchical.

From PHP I get the source in JSON, like:
Code: [Select]
[{"Label":"Vendas","Category":"Recebimentos"},{"Label":"Fornecedores","Category":"Pagamentos"}]
In JS:
Code: [Select]
$inp.autocomplete({
        delay:0,
        source:'search.php'
        }).focus(function(){
        $(this).data("autocomplete").search($(this).val());
        })

But this gives me an empty list although I can see the term is being searched in search.php

Is there any way to use autocomplete with categories?

Thanks in advance for helping!

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: Autocomplete with categories
« Reply #1 on: February 28, 2014, 05:42:35 pm »
l in label and c in category is in lower case.

You also need to override _renderMenu as shown in this example

http://jqueryui.com/autocomplete/#categories

nuno.nogueira

  • Pro Economy
  • Jr. Member
  • *
  • Posts: 95
    • View Profile
Re: Autocomplete with categories
« Reply #2 on: February 28, 2014, 05:56:44 pm »
Yes, I've overriden the menu (I forgot to mention in my question).
I've also used "catcomplete" instead of "autocomplete".

You may see the example at http://www.portal-gestao.com/or%C3%A7amento.html in column "Categoria".

Thanks for your help!

nuno.nogueira

  • Pro Economy
  • Jr. Member
  • *
  • Posts: 95
    • View Profile
Re: Autocomplete with categories
« Reply #3 on: February 28, 2014, 06:02:21 pm »
In addition to the above question, another approach would be using a selector with optgroup, like:

Code: [Select]
    <select class="categorias">
        <optgroup label="Food">
            <option>Cheese</option>
            <option>Egg</option>
            <option id="newDairy">NEW</option>
        </optgroup>
        <optgroup label="Vegetables">
            <option>Cabbage</option>
            <option>Lettuce</option>
            <option>Beans</option>
            <option>Onions</option>
            <option>Courgettes</option>
            <option id="newVeg">NEW</option>
        </optgroup>
    </select>

In my Col Model, I could use:

Code: [Select]
{ title: "Categoria", dataIndx: "nome_categoria",
            editor: {
            type: 'select',
            options: // here I have to link it to a remote datasource, but how to deal with optgroup?
            }

Sorry for lots of questions...

nuno.nogueira

  • Pro Economy
  • Jr. Member
  • *
  • Posts: 95
    • View Profile
Re: Autocomplete with categories
« Reply #4 on: February 28, 2014, 06:18:25 pm »
This works:

Code: [Select]
if(dataIndx=='nome_categoria'){
        $inp.catcomplete({
        delay:0,
        source:'search.php'
        })
        };

Thanks for your help, the lower caps matter...  ???

If you bother to answer the other question, I'd be grateful!

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: Autocomplete with categories
« Reply #5 on: February 28, 2014, 06:24:10 pm »
you would require options to be in JSON format as shown under filter option. The same format can be used in editor.

http://paramquery.com/pro/api#option-column-filter

You would need to mention labelIndx, valueIndx & groupIndx in editor definition.

Live example for grouping in select list is here:

http://paramquery.com/pro/demos/filter_header_local

===========================
Above is applicable to v2.0.4
« Last Edit: February 28, 2014, 06:27:40 pm by paramquery »