With the code similar to what jquery ui offers, I'm testing this combobox in my cakephp, the problem is that in no way does it show the set to enable the dropdown menu, already download jquery ui with the images folder, and it still did not work. Code below:
The whole code in my cakephp looks like this:
<?php $this->start('script'); ?>
<script src="/js/jquery.currency.js"></script>
<script>
var current = new Date();
var aux = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 7);
if (aux.getDay() != 1) {
var nextMonth = new Date(aux.getFullYear(), aux.getMonth() + 1, 1);
var days = Math.floor((nextMonth - aux) / (1000 * 60 * 60 * 24))
if (days < 7)
current = new Date(aux.getFullYear(), aux.getMonth(), aux.getDate() + days);
else
current = aux;
} else {
current = aux;
}
$("#data-inicio").datepicker({
minDate: current,
dateFormat: 'dd/mm/yy',
dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
beforeShowDay: function (date) {
return [date.getDay() == 1, ""]
},
});
</script>
<?php $this->end(); ?>
<?php $this->start('script'); ?>
<script>
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.attr("role","button")
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right")
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_removeIfInvalid: function( event, ui ) {
// Selected an item, nothing to do
if ( ui.item ) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if ( valid ) {
return;
}
// Remove invalid value
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
this.input.autocomplete( "instance" ).term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {$( "#combobox" ).toggle();});
</script>
<?php $this->end(); ?>
<?php
$this->TipoCurso = ClassRegistry::init('TipoCurso');
$this->Idioma = ClassRegistry::init('Idioma');
$this->Localidade = ClassRegistry::init('Localidade');
$listaCurso = $this->TipoCurso->find('list');
$listaIdioma = $this->Idioma->find('list',array('conditions'=>array('ativo'=>1),'order'=>'id'));
$listaLocalidade = $this->Localidade->find('list',array('conditions'=>array('Localidade.localidade_id is null')));
$opcoesPaisCidade = array();
foreach($listaLocalidade as $p_id => $p_nome){
$cidades = $this->Localidade->find('list',array('conditions'=>"Localidade.Localidade_id ={$p_id}", 'Localidade.programas is not null'));
$opcoesPaisCidade[$p_id] = $p_nome;
foreach($cidades as $c_id => $c_nome){
$opcoesPaisCidade[$c_id] = ' - '.$c_nome;
//die(print_r($opcoesPaisCidade));
}
}
//die(print_r($opcoesPaisCidade));
?>
<section class="custom-budget-section custom-budget-section-lg">
<div class="shadow">
<div class="container-fluid">
<?=
$this->Form->create('orcamento', array(
'url' => array('controller' => 'Simulador', 'action' => 'index'),
'type' => 'POST'
));
?>
<h2 class="custom-budget-section-title f-white text-center f-light">
Faça o seu Orçamento personalizado
</h2>
<h3 class="f-transparent-white text-center f-light">
A forma mais fácil de escolher o intercâmbio ideal para você.<br/>(Faça uma simulação e veja uma estimativa de custo)
</h3>
<div class="content">
<div class="col-md-6">
<div class="form-group form-group-white">
<label for="">Data de nascimento</label>
<?= $this->Form->input('data_nascimento', array('class' => 'form-control mask_date', 'label' => false)) ?>
</div>
<div class="form-group form-group-white">
<label for="">País ou cidade</label>
<div class="ui-widget">
<select id="combobox" name="data[orcamento][localidade_id]">
<option value="">Select one...</option>
<?php
foreach($opcoesPaisCidade as $p_id => $p_nome){
?>
<option value="<?=$p_id?>"><?=$p_nome?></option>
<?}?>
</select>
</div>
</div>
<div class="form-group form-group-white">
<label for="">Data de Início</label>
<input type="text" name="data[orcamento][data_inicio]" id="data-inicio" class="form-control datepicker" placeholder="Data de início" aria-describedby="data-inicio-addon">
<!--label for="tags">Tags: </label>
<input id="tags" class='form-control'-->
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-white">
<label for="">Tipo de Curso</label>
<?= $this->Form->input('tipoCurso', array('label' => false, 'options' => $listaCurso, 'empty' => 'Selecione um tipo de curso', 'class' => 'form-control')); ?>
</div>
<div class="form-group form-group-white custom-budget-s-in">
<label for="">Duração (semanas) *Gênero*</label>
<div class="row">
<div class="col-xs-6">
<?= $this->Form->input('duracao', array('class' => 'form-control', 'placeHolder' => 'Quantidade', 'label' => false)) ?>
</div>
<div class="col-xs-6">
<?= $this->Form->input('sexo', array('class' => 'form-control', 'empty' => 'Selecione', 'label' => false, 'options' => array('M' => 'Masculino', 'F' => 'Feminino'))) ?>
</div>
</div>
</div>
<div class="form-group form-group-white">
<input type="submit" value="Buscar" class="btn btn-primary">
</div>
</div>
<div class="col-md-12 budget-contact text-center">
<p>Você pode entrar em <a href="/conteudo/112">contato</a> conosco</p>
</div>
</div>
<?= $this->Form->end() ?>
</div>
</div>
<?=$this->element('/aereo/orcamenton')?>
And my input looks like this:
