Yii framework de jQuery UI AutoComplete eklentisini kullanabilmeniz için CJuiAutoComplete widget ı bulunur. Javascript diziden, JSON dosyasından, PHP dosyasından veya oluşturduğunuz Controller clasından verileri gösterebilirsiniz. JQuery UI AutoComplete options ve events fonksiyonlarını Yii CJuiAutoComplete widget ı ile kullanma imkanınız vardır. Örnek kullanım:
<?php
// indisler araçlarınızın detay sayfasının linki olsun, değerler ise kullanıcıların arama yapacakları kelimeler olsun
$arabalar = array(
array("value" => "opel-corsa", "label" => "Opel Corsa")
array("value" =>"opel-vectra", "label" => "Opel Vectra")
array("value" => "ford-focus", "label" => "Ford Focus" ));
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>'hizli_arac_modeli_ara',
'source'=> json_encode($arabalar), // json dosyası , php dosyası url yazılabilir
//'source' => $this->createUrl('test/json'),
'value' => 'Araba ara',
'options'=>array(
'minLength'=>'0',
'autoFocus' => 'true',
'select' => 'js:function( event, ui ) {if(ui.item.value) window.location.href="/arabalar/"+ui.item.value;}'
),
'htmlOptions'=>array(
'class'=>'arama' //arama text input classı
),
));
?>
<script type="text/javascript">
/*araba arama : kullanıcı inputa tıkladığında arama listesi açılması ve inputtan ayrıldığında içine "Araba ara" yazısını silmesi için*/
$('#hizli_arac_modeli_ara').live('focus',function(){
if ($(this).val() == "Araba ara") $(this).val('');
$(this).autocomplete('search', 'a');
});
/*kullanıcı inputtan ayrıldığında içine yeniden "Araba ara" yazması için*/
$('#hizli_arac_modeli_ara').live('blur',function(){
$(this).val('Araba ara');
});
/* kullanıcı inputta yazarken tamam aradığım bu diyerek enter tuşuna basarsa yönlendirmek için*/
$('#hizli_arac_modeli_ara').live('keyup',function(e){
if(e.keyCode =='13') { window.location.href ='/arabalar/'+$(this).val();}
});
</script>
Kullanım örneği için piyasa.com “hisse arama” kısmına bakabilirsiniz.
