ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: nuno.nogueira on February 28, 2014, 05:15:34 pm

Title: Autocomplete with categories
Post by: nuno.nogueira 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!

Title: Re: Autocomplete with categories
Post by: paramvir 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

Title: Re: Autocomplete with categories
Post by: nuno.nogueira 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 (http://www.portal-gestao.com/or%C3%A7amento.html) in column "Categoria".

Thanks for your help!

Title: Re: Autocomplete with categories
Post by: nuno.nogueira 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...

Title: Re: Autocomplete with categories
Post by: nuno.nogueira 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!

Title: Re: Autocomplete with categories
Post by: paramvir 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