i wanted to use autocomplete in one of the my forms.i googled it and found a very good example from here
but there is an issue when i implemented the autocomplete functionality
when i type something in textbox the suggestion list is displayed below and i can select items from the list.when i select an item from the list the id of the selected item is saved in the hidden field as it should be.
the problem im facing when i dont select any item from the list and get out of the textbox using tab.let me explain with the help of an example
my autocomplete displays list of names when i press character ‘a’.list appears suggesting alan,alax,adam etc
if i select adam from the list then the id for adam will be saved in the hidden field
but if i do not select adam from the list instead i type it.then the hidden field does not have the id of adam.
i want something like when im typing the top most item from the suggestion is automatically appended to the my input and also selected from the list so that when i press tab the top most suggestion item is selected
just like in visual studio 2008 windows forms combobox with suggest append as autocomplete mode.
i want the exact same thing or any thing close to it
that’s true! Your post suggested me to try the use case you’ve described: I can repoduce the same thing, hidden field is not updated when typing all the response in the autocomplete input box.
Below are my options in CJuiAutoComplete config array:
'options'=>array(
'minLength'=>'2',
'select' => 'js:function(event, ui){ jQuery("#Vol_immat").val(ui.item["immat"]); }'// have also tried with 'change'
),
id value from autocomplete is passed to hidden field by using an “onSelect” js event. If you type all the response in the autocomplete text box, then there is no “onSelect” event and the id could not be send. Try with ‘change’ instead of ‘select’ (or maybe ‘keyup’) …
I had a look at the jquery plugin you’ve mentionned. There is no way to handle dynamic db search as used in the wiki article. See plugin settings:
$(document).ready(function() {
$("select").searchable({
maxListSize: 100, // if list size are less than maxListSize, show them all
maxMultiMatch: 50, // how many matching entries should be displayed
exactMatch: false, // Exact matching on search
wildcards: true, // Support for wildcard characters (*, ?)
ignoreCase: true, // Ignore case sensitivity
latency: 200, // how many millis to wait until starting search
warnMultiMatch: 'top {0} matches ...', // string to append to a list of entries cut short by maxMultiMatch
warnNoMatch: 'no matches ...', // string to show in the list when no entries match
zIndex: 'auto' // zIndex for elements generated by this plugin
});
});
You will loose all the ajax facilities offered by CJuiAutocomplete …
Anyway, if you want to use it, you can try to write your own widget for that (see step 1 of the wiki article as a basis)
i have been trying to use change event as well as the keyup event as you told me in your previous post with no success.here is the code for my updated version of extension
<?php
Yii::import("zii.widgets.jui.CJuiAutoComplete");
class myAutoComplete extends CJuiAutoComplete
{
/**
* Run this widget.
* This method registers necessary javascript and renders the needed HTML code.
*/
public function run()
{
list($name,$id)=$this->resolveNameID();
// Get ID Attribute of actual hidden field containing selected value
$attr_id = get_class($this->model).'_'.$this->attribute;
if(isset($this->htmlOptions['id']))
$id=$this->htmlOptions['id'];
else
$this->htmlOptions['id']=$id;
if(isset($this->htmlOptions['name']))
$name=$this->htmlOptions['name'];
if($this->hasModel()) {
echo CHtml::textField($name,$this->value,$this->htmlOptions);
echo CHtml::activeHiddenField($this->model, $this->attribute);
}else {
//echo CHtml::textField($name,$this->value,$this->htmlOptions);
// CHtml::hiddenField($name,$this->value,$this->htmlOptions);
}
if($this->sourceUrl!==null)
$this->options['source']=CHtml::normalizeUrl($this->sourceUrl);
else
$this->options['source']=$this->source;
// Modify Focus Event to show label in text field instead of value
if (!isset($this->options['focus'])) {
$this->options['focus'] = 'js:function(event, ui) {
$("#'.$id.'").val(ui.item.label);
return false;
}';
}
if (!isset($this->options['select'])) {
$this->options['select'] = 'js:function(event, ui) {
$("#'.$id.'").val(ui.item.label);
$("#'.$attr_id.'").val(ui.item.id);
}';
}
if (!isset($this->options['change'])) {
$this->options['change'] = 'js:function(event, ui) {
$("#'.$id.'").val(ui.item.label);
$("#'.$attr_id.'").val(ui.item.id);
}';
}
$options=CJavaScript::encode($this->options);
//$options = $this->options;
$js = "jQuery('#{$id}').autocomplete($options);";
$cs = Yii::app()->getClientScript();
$cs->registerScript(__CLASS__.'#'.$id, $js);
}
}
using this code i get the following jquery error
TypeError: ui.item is null
also checked the the value in the hidden field but the value is not stored there.
Can someone post an update to this issue? This is really a bug that autocomplete does not automatically select fully typed correct value from its dropdown.
