I'm doing a search form ( action=GET
) where a field uses Selectize.js:
$("#selectize").each(function () {
$(this).selectize({
plugins: ['remove_button'],
valueField: 'AdvogadoId',
labelField: 'Descricao',
searchField: ['AdvogadoId', 'Descricao'],
create: false,
persist: false,
preload: true,
initUrl: "/Advogados/PesquisarJson/",
initData: true,
load: function (query, callback) {
$.ajax({
url: "/Advogados/PesquisarJson/",
type: 'GET',
error: function () {
callback();
},
success: function (res) {
callback(res);
}
});
}
});
});
With the empty form, I type the name and the acronym of the lawyer. Comes all filled out correctly. When submitting the search, the values go to the backend correctly, separated by commas.
When the form is reloaded with GET
values, what happens is that each tag appears only with the acronym of the lawyer filled in without the name. When checking the options, the options chosen appear only as the acronym, the correct one being "Acronym - Name".
I tried some solutions like this (it does not work, as well as being complex to what I need) and this (I do not use data-data
: I use only form values).
Is there any way (preferably performative) to load these values correctly into each selected screen tag?
Code in the Backend:
public JsonResult PesquisarJson(String termo = "")
{
// Aqui não é EF. É Dapper em cima de Oracle.
using (var repositorio = new AdvogadoRepositorio())
{
var registros = repositorio.Condicao(a => a.DataSaida == null).OrdenarPor(a => a.AdvogadoId).Selecionar();
return Json(registros.Select(a => new { AdvogadoId = a.AdvogadoId, Descricao = a.AdvogadoId + " - " + a.Nome }).ToList(),
JsonRequestBehavior.AllowGet);
}
}
HTML:
<div class="selectize-control form-control selectize multi plugin-remove_button">
<div class="selectize-input items not-full">
<input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 1; position: relative; left: 0px;">
</div>
<div class="selectize-dropdown multi form-control selectize plugin-remove_button" style="display: none;">
<div class="selectize-dropdown-content">
</div>
</div>
</div>
Rest Result:
[
{
"AdvogadoId": "A1",
"Descricao": "A1 - Fulano de Araujo"
},
{
"AdvogadoId": "A2",
"Descricao": "A2 - Beltrano de Lima"
},
{
"AdvogadoId": "A3",
"Descricao": "A3 - Ciclano da Silva"
},
{
"AdvogadoId": "A4",
"Descricao": "A4 - Herculano Junior"
},
...
]