suggest

Descrição

Informações relacionadas ao sistema Magic Suggestion da Ceicom, utilizado para mostrar conteúdos baseados em requisições ajax/opções estaticas ou implementação de tags.

Tem um funcionamento semelhante ao chosen2 mais conhecido como "multiselect".

Utiliza de base o plugin magic suggest com algumas modificações no core para funcionar dentro do cfw de forma "dinamica"

Requisitos.

Sistema somente disponivel para funcionamento dentro das paginas de detalhamento de dados do CMS.

Estrutura

O input é gerado apartir de uma div, esta div deve conter a classe suggest e um nome para o input. (ver data-name)

<div class="suggest" data-name="keywords"></div>

Parâmetros.

data-name

Nome do input que será gerado, é o único parametro obrigatório (além da classe suggest) para funcionamento do plugin.

<div class="suggest" data-name="keywords"></div>

data-showtrigger

Deve tratar o input como um select adicionado o trigger ao final do input.

<div class="suggest" data-name="keywords" data-showtrigger="true"></div>

Obs. afeta a regra de caracteres mínimos do input.

data-ajax

Informa ao input que suas opções são dinâmicas. A requisição será feita para: /admin/modulos/handlers/selects.ashx passando 2 parâmetros:

type: com o valor suggest
select: com o valor igual ao data-name que foi informado

<div class="suggest" data-name="keywords" data-ajax="true"></div>

Obs. a aplicação desta opção faz com o que o plugin IGNORE TOTALMENTE a opção data-options (se repassada).

data-options

Informa ao input suas opções iniciais. Os dados devem ser recebidos em string separados por vírgula.

<div class="suggest" data-name="keywords" data-options="opção1,opção2,opção3"></div>

Obs. esta opção é TOTALMENTE IGNORADA se a opção data-ajax existir.

data-input

Libera o usuário para digitas suas próprias opções fora das pré definidas (ajax ou estaticas).

<div class="suggest" data-name="keywords" data-input="true"></div>

Obs. esta opção é automaticamente habilitada se não existirem as opções data-ajax ou data-options.

data-value

Quais valores devem vir inicialmente selecionados. Para opções dinâmicas informe os ID´s separados por vírgula. Nos demais casos informe o nome/valor.

<!-- dados dinâmicos -->
<div class="suggest" data-name="keywords" data-ajax="true" data-value="1,2"></div>
<!-- dados estáticos -->
<div class="suggest" data-name="keywords2" data-options="opção1,opção2,opção3" data-value="opção1,opção2"></div>
<!-- ou -->
<div class="suggest" data-name="keywords3" data-value="item1,item2"></div>

Regra caracteres mínimos

Quando input for configurado para requisições ajax exigirá no mínimo 2 caracteres para efetuar a consulta. Esta regra perde a validade quando é solicitado ao input se portar como select, neste caso não existe caracteres mínimos para a consulta.

Estrutura de dados

Envio de dados (salvar/atualizar)

Os dados serão submitados junto ao formulário padrão, os itens selecionados serão enviados em estilo array de inputs:

<div class="suggest" data-name="keywords1" data-ajax="true"></div>
<div class="suggest" data-name="keywords2" data-options="item1,item2,item3"></div>
<div class="suggest" data-name="keywords3"></div>

...
keywords1[]: 0
keywords1[]: 1
keywords2[]: item1
keywords3[]: francisco beltrão
keywords3[]: paraná

Recebimento de dados (handler select)

Os dados devem ser enviados em um array de objetos contendo as chaves id e name:

[
  {
    "id": 0,
    "name": "Paris"
  },
  {
    "id": 1,
    "name": "New York"
  },
  {
    "id": 2,
    "name": "Francisco Beltrão"
  }
]

Obrigado 👍